: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 结构如下：
-
p:nth-child(2)：能选中第一个 p，因为它是父元素的第二个子元素。 -
p:nth-child(4)：能选中第二个 p，因为它是第四个子元素。 -
p:nth-of-type(2)：也能选中第二个 p，因为它是第二个 p 类型元素，不管位置是不是第二。 -
p:nth-child(2)不会选中第二个 p，因为它不是第二个子元素。
总结关键点
- :nth-child(n)：看整体位置。第 n 个子元素必须是你指定的标签。
- :nth-of-type(n)：看同类元素中的顺序。是第 n 个该类型元素即可，不管中间穿插了什么。
- 当元素类型一致且顺序连续时，两者行为可能相同；一旦混用标签，结果就可能不同。
