这段代码,没有像我们期望中的标红.test元素(即第2个段落标签),如果没理解到上面提到的语法关键词意思,第一反应可能会产生“:first-of-type带class写法浏览器不能识别,失效,这是bug”的错误理解。 我们不能简单粗暴,理所当然的将上面的代码错误理解为“匹配父元素.box内第一个.test元素”,我们按上面提到关键词...
不幸的是，CSS没有提供:first-of-class仅选择类的第一次出现的选择器。作为一种解决办法，您可以使用...
CSS:first-of-type选择器用于在一组元素中选择其类型的第一个元素。 例如,如果您有一组段落,则:first-of-type选择器将选择该组中的第一个段落。 此选择器通常与其他选择器(例如子选择器)结合使用来选择特定元素。 例如,以下代码将选择页面上第一个 div 元素中的第一段: div:first-child>p:first-of-type{...
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.如果list1、list2中第一个标...
::first-letter :first-line :in-range :indeterminate :invalid :lang :nth-child(n) :nth-last-child(n) :nth-of-type(n) :nth-last-of-type(n) :optional :out-of-range :required ::selection :target :valid 浏览器兼容 :fullscreen ::placeholder :read-only :read-write ::selection 注意事项...
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-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
:first-of-type表示“是父元素的第一个对应元素的子节点”。 :last-of-type表示“是父元素的最后一个对应元素的子节点”。 p :first-child 或者 span:first-child p a:first-of-type :nth-child后接整数或一次函数,选中特性序号的孩子节点。 p :nth-child(2) /* 第二个孩子 */ p :nth-child(...
3.class选择器 可以同时选取 不同 的元素 <!DOCTYPE html>Title/*3.class选择器 可以选取 不同 的元素*/.tycs{height:50px;width:140px;background:deeppink;}测试通用元素匹配1测试通用元素匹配2测试通用元素匹配3 效果 所有的class同名被选中设置属性,最后一个是span元素不支持设置宽高 4.id选择器 id唯一 ...
CSS3 first-of-type选择器 “:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。