例如,如果您有一组段落,则:first-of-type选择器将选择该组中的第一个段落。 此选择器通常与其他选择器(例如子选择器)结合使用来选择特定元素。 例如,以下代码将选择页面上第一个 div 元素中的第一段: div:first-child>p:first-of-type{/* CSS code */} 什么是 CSS First of Class CSS 选择器选择您想...
What is CSS First of Class Implement CSS First of Class Conclusion The CSS:first-of-typeselector is used to select the first element of its type in a group of elements. For example, if you have a group of paragraphs, the:first-of-typeselector will select the first paragraph in the gr...
和是它的兄弟姐妹中的第一种。不幸的是，CSS没有提供:first-of-class仅选择类的第一次出现的选择器。
这里有个容易出错的地方,比如div .h2:first-of-type,很多人以为会选择到第一个class为.h2的元素,其实不是的,这里可以这么来理解: 首先,div .h2:first-of-type会查找.h2类名所对应的元素,这里是h1元素,所以:first-of-type会匹配第一个h1元素,也就是说,这里的class类名只是找到对应元素类型的作用。接下来结...
DOCTYPE html>Title/*4.id选择器 id是唯一的 选中指定的某个元素*/#id_1{height:50px;width:140px;background:lightpink;}测试通用元素匹配1测试通用元素匹配测试通用元素匹配2测试通用元素匹配3 效果 只有id=id_1的被选中设置属性 5.群组选择器 组员之间用逗号","隔开 <!DOCTYPE html>Title/*群组选择器 组...
我是h1 我是h1 1.指定标签 h1:first-of-type { color: red; // #test底下所有的h1找出来,其中第一个h1的字体颜色改为red; } 2.指定class .hha:first-of-type { color: blue; // 1.找到所有class为hha的标签,上面的Dom结构里有、; // 2.找到Dom结构所有h1、span(为了方便理解记作list1,list...
这段代码,没有像我们期望中的标红.test元素(即第2个段落标签),如果没理解到上面提到的语法关键词意思,第一反应可能会产生“:first-of-type带class写法浏览器不能识别,失效,这是bug”的错误理解。 我们不能简单粗暴,理所当然的将上面的代码错误理解为“匹配父元素.box内第一个.test元素”,我们按上面提到关键词...
h1:first-of-type {color: red; //#test底下所有的h1找出来,其中第一个h1的字体颜色改为red; } 2.指定class .hha:first-of-type {color: blue; //1.找到所有class为hha的标签,上面的Dom结构里有、; //2.找到Dom结构所有h1、span(为了方便理解记作list1,list2); //3.如果list...
下面就说说first-child与first-of-type的区别：first-child：父元素的第一个子元素且必须符合指定类型 first-of-type：父元素的符合指定类型的第一个子元素 当然，光看文字也是很难理解的，下面看看例子： 第1行 第2行 第3行 这种情况下，不管是p:first-of-type还是p:first-child，第1行都会被...