nth-of-type和nth-child的区别是什么

nth-of-typenth-child是CSS选择器中用于选择特定位置的元素的伪类。它们之间的区别在于它们对待元素的方式不同。

  1. nth-of-typenth-of-type选择器基于元素的类型来选择特定位置的元素。它会匹配同一类型的元素中符合给定位置规则的元素。例如,:nth-of-type(2)将选择同一父级下第二个出现的该类型元素。
  2. nth-childnth-child选择器基于元素在其父级中的位置来选择特定位置的元素。它会考虑所有子元素(无论其类型)并根据给定位置规则进行匹配。例如,:nth-child(2)将选择父级中的第二个子元素,而不仅仅是同一类型的元素。

具体来说,区别可以通过以下示例说明:

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <span>一个跨度为1的行内元素</span>
  <p>第三个段落</p>
</div>
  • p:nth-of-type(1)将选择第一个段落元素。
  • p:nth-child(1)将选择第一个子元素,即第一个段落元素。
  • p:nth-of-type(2)将选择第二个段落元素。
  • p:nth-child(2)将选择第二个子元素,即跨度为1的行内元素。
  • p:nth-of-type(3)将选择第三个段落元素。
  • p:nth-child(3)将选择第三个子元素,即第三个段落元素。

总结:nth-of-type基于元素类型选择特定位置的元素,而nth-child基于元素在父级中的位置选择特定位置的元素。


【AD】美国洛杉矶/香港/日本VPS推荐,回程电信CN2 GIA线路,延迟低、稳定性高、免费备份_搬瓦工