:nth-child 以位置为核心，选择父元素下第n个子元素且必须匹配指定标签；:nth-of-type 以类型顺序为核心，选择同标签中第n个。例如在混合子元素中，p:nth-child(2) 要求第二个子元素是p，而 p:nth-of-type(2) 只需是第二个p标签，无论整体位置。
:nth-of-type 和 :nth-child 都是 CSS 中的结构伪类，用于选择父元素下的特定子元素，但它们的匹配逻辑有本质区别。理解它们的不同，关键在于“选择依据是什么”。
:nth-child 以位置为中心
这个伪类关注的是：目标元素是否位于父元素的第几个子元素位置上，而不关心它本身的标签类型。
也就是说，:nth-child(n) 会从父元素的第一个子元素开始数，只要位置符合 n（可以是数字、公式或关键字），就选中该位置的元素，前提是这个元素存在且满足前面的元素类型条件（如果有指定）。
比如：-
p:nth-child(2)表示：父元素的第二个子元素，并且它必须是一个 <p> 标签，才会被选中。 - 如果第二个子元素是 <div>，即使后面有多个 <p>，这个选择器也不会命中任何元素。
:nth-of-type 以类型和顺序为中心
这个伪类关注的是：当前元素在其父元素中，是同类型标签中的第几个。它会忽略其他类型的兄弟元素，只统计相同标签的出现顺序。
立即学习“前端免费学习笔记（深入）”；
换句话说，:nth-of-type(n) 会先筛选出所有同类型的兄弟元素（如所有 <p>），然后从中选出第 n 个。
例如：-
p:nth-of-type(2)表示：在所有 <p> 标签中，选择第二个出现的，不管它在父元素中整体排第几位。 - 即使前面有几个 <div> 或 <span>，只要它是第二个 <p>，就会被选中。
实际对比示例
假设有如下 HTML 结构：
<div> <h1>标题</h1> <p>第一段</p> <span>辅助内容</span> <p>第二段</p> </div>
-
p:nth-child(2)：选中第一个 <p>，因为它是父元素的第二个子元素，位置匹配。 -
p:nth-child(4)：不会选中第二个 <p>，虽然它是第四个子元素，但 :nth-child(4) 要求第四个子元素是 <p>，而这里第四个确实是 <p>，所以能匹配。 -
p:nth-of-type(2)：选中第二个 <p>，因为它是所有 <p> 中的第二个，无论位置如何。 -
p:nth-child(3)：无法匹配任何元素，因为第三个子元素是 <span>，不是 <p>。
核心区别总结
- :nth-child 看的是“位置” —— 第几个孩子，是不是我要的标签。
- :nth-of-type 看的是“同类中的顺序” —— 同类标签中排第几。
- 当子元素类型混杂时，两者结果可能完全不同。
