css:nth-of-type选择器和nth-child有什么不同

:nth-child(n)按所有子元素排序，要求第n个位置的元素是目标标签；:nth-of-type(n)按同类型元素排序，选择该类型中第n个。例如在span、p、span、p结构中，p:nth-child(2)选第一个p（整体第2个），p:nth-of-type(2)选第二个p（p类第2个）。两者计数范围不同：前者是全部子元素，后者仅同类标签。

:nth-of-type 和 :nth-child 都是 CSS 中用于选择特定位置子元素的伪类选择器，但它们的判断逻辑不同，容易混淆。核心区别在于：它们计算“第几个”的依据不一样。

:nth-child 按父元素下的所有子元素排序

这个选择器只看元素在父容器中是“第几个孩子”，不关心类型。只要满足位置条件，并且是目标标签，就会被选中。
换句话说，它先数位置，再看标签是否匹配。

• 例如：p:nth-child(2) 表示：父元素下的第二个子元素，且这个元素必须是 p 标签，才会被选中。
• 如果第二个子元素是 div，哪怕它是第二个 p 元素，也不会被选中。

:nth-of-type 按同类型元素排序

这个选择器先筛选出指定类型的元素，然后在这个“同类列表”中按顺序计数。
它更关注“这是第几个该类型的元素”。

• 例如：p:nth-of-type(2) 表示：所有 p 类型的子元素中，排在第二位的那个。
• 即使前面有其他标签（如 div、span），只要它是第二个 p，就能被选中。

举个例子说明区别

假设 HTML 结构如下：

<div>
<span>Span 1</span>
<p>Paragraph 1</p>
<span>Span 2</span>
<p>Paragraph 2</p>
</div>

• p:nth-child(2)：能选中第一个 p，因为它是父元素的第二个子元素。
• p0：能选中第二个 p，因为它是第四个子元素。
• p:nth-of-type(2)：也能选中第二个 p，因为它是第二个 p 类型元素，不管位置是不是第二。
• p:nth-child(2) 不会选中第二个 p，因为它不是第二个子元素。

总结关键点

• :nth-child(n)：看整体位置。第 n 个子元素必须是你指定的标签。
• :nth-of-type(n)：看同类元素中的顺序。是第 n 个该类型元素即可，不管中间穿插了什么。
• 当元素类型一致且顺序连续时，两者行为可能相同；一旦混用标签，结果就可能不同。

基本上就这些。理解清楚“计数范围”是关键。