:first-of-type :first-of-type伪类用于选择父元素中第一个特定类型的子元素。与:first-child不同,:first-of-type会考虑元素的类型。 例如,li:first-of-type会选择每个ul或ol中的第一个li元素,即使它不是列表中的第一个子元素(比如前面有其他的非li元素)。 Some other element<!-- 不会被选中 -->Item ...
:nth-child只考虑元素在父元素中的位置,而不考虑元素的类型。 如果要选择第二个p元素,需要使用:nth-of-type(2)。 总结: :first-child: 选择父元素的第一个子元素。 :first-of-type: 选择父元素中特定类型的第一个子元素。 :nth-child(n): 选择父元素的第 n 个子元素 (无论类型)。 希望这些例子能清...
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child h1:first-child span:first-child :first-child 然后,在css3中又定义了:first-of-type这个选择器,这个跟:first-child有什么区别呢?还是看那段代码: p:first-of-type h1:first-of-type ...
区别::first-child匹配父元素中的第一个子元素,可以说是结构上的第一个子元素;而:first-of-type匹配父元素下相同类型子元素中的第一个,不再限制是第一个子元素了,只要是该类型元 区别::first-child匹配父元素中的第一个子元素,可以说是结构上的第一个子元素;而:first-of-type匹配父元素下相同类型子元素中...
css选择器中first-child与first-of-type的区别 :first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素,匹配其父元素中的第一个子元素。 比如有段代码: p:first-child 匹配到的是p元素,因为p元素是p的第一个子元素;h2:first-child 匹配不到任何元素,因为在这里h2是p的第二...
在CSS选择器中，有两个关键的区别选择器：`:first-child`和`:first-of-type`。`:first-child`选择的是一个元素作为其父元素的第一个子元素，关注的是结构上的顺序。例如，`p:first-child`匹配的是第一个``元素，因为它是其父元素``的第一个子元素。然而，`:first-of-type`则更进一步，它...
:first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 同样类型的选择器 :last-chi...
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。
first-of-type:选择器匹配属于其父元素的特定类型的首个子元素的每个元素 nth-of-type():选择器匹配属于其父元素的特定类型的第x个子元素的每个元素 code1:first-child body和第一个div中的首个p有效,第二个p和第三个span无效,因为p是首个子元素 ...
:first-child选择器是css2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码: p:first-child 匹配到的是p元素,因为p元素是div的第一个子元素; h1:first-child 匹配不到任何元素,因为在这里h1是div的第二个子元素,而不是第一个; ...