:nth-child只考虑元素在父元素中的位置,而不考虑元素的类型。 如果要选择第二个p元素,需要使用:nth-of-type(2)。 总结: :first-child: 选择父元素的第一个子元素。 :first-of-type: 选择父元素中特定类型的第一个子元素。 :nth-child(n): 选择父元素的第 n 个子元素 (无论类型)。 希望这些例子能清...
在CSS选择器中，有两个关键的区别选择器：`:first-child`和`:first-of-type`。`:first-child`选择的是一个元素作为其父元素的第一个子元素，关注的是结构上的顺序。例如，`p:first-child`匹配的是第一个``元素，因为它是其父元素``的第一个子元素。然而，`:first-of-type`则更进一步，它匹...
p:first-of-type h1:first-of-type span:first-of-type :first-of-type 所以,通过以上两个例子可以得出结论: :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。 :first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就...
“:first-of-type”选择器类似于“:first-child”选择器,不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。 示例演示: 通过“:first-of-type”选择器,定位div容器中的第一个p元素(p不一定是容器中的第一个子元素),并设置其背景色为橙色。 HTML代码: 我是一个块元素...
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素。 定义的解析 :first-child 当出现p:first-child时,其所匹配的元素必须符合以下两点:1.必须为p标签;2.必须为某个父元素的第一个子元素 :first-of-type 当出现p:first-of-type时,其所匹配的元素为所有子元素中的第一个p标签(不论...
区别::first-child匹配父元素中的第一个子元素,可以说是结构上的第一个子元素;而:first-of-type匹配父元素下相同类型子元素中的第一个,不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 css选择器中first-child与first-of-type的区别
first-of-type 选择器选取属于其父元素的特定类型的第一个子元素的所有元素。 选取第一个 元素: $("p:first") 定义和用法 :first 选择器选取第一个元素。 注意:这个选择器只用于选取单个元素。使用 选择器选取多个元素(每个父元素一个)。 最常见
:first-of-type匹配的是某父元素下相同类型子元素中的第一个,比如 p:first-of-type,就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。
区别::first-child匹配父元素中的第一个子元素,可以说是结构上的第一个子元素;而:first-of-type匹配父元素下相同类型子元素中的第一个,不再限制是第一个子元素了,只要是该类型元素的第一个就行了。 【推荐教程:CSS视频教程 】 css选择器中first-child与first-of-type的区别 ...
p:first-child：选择不到任何元素，因为p并不是div的第1个子元素，而是div的第2个子元素。span:first-child:选择不到任何元素，因为span并不是div的第1个子元素，而是div的第3个子元素；（2）：first-of-typeh1: first-of-type:选择的是h1元素，因为h1元素是div中所有h1元素中的第1个h1元素，...