立即学习“前端免费学习笔记（深入）”；

• 更符合语义直觉，尤其在 CMS 输出不可控 HTML 时更鲁棒
• 不匹配自闭合标签（如
）的“类型”，因为它们没有结束标签，不参与同类型计数逻辑
• 注意：伪元素（如 ::before）不参与任何 :nth- 计算，它们不在 DOM 子节点中

混用时容易踩的坑：div:nth-child(2) ≠ div:nth-of-type(2)

假设有如下 HTML：

  
标题
  
第一段
  容器
  
第二段

那么：

• p:nth-child(2) → 匹配“第一段”，因为它是第 2 个子节点
• p:nth-of-type(2) → 匹配“第二段”，因为它是第 2 个

• div:nth-child(3) → 匹配那个 ，因为它是第 3 个子节点
• div:nth-of-type(1) → 同样匹配它，因为它是唯一一个

  如果删掉

  ，p:nth-child(2) 就会从匹配“第一段”变成匹配“第二段”，而 p:nth-of-type(2) 始终不变。

  性能与兼容性其实没差别

  两者在现代浏览器中解析开销几乎一致，都不是性能瓶颈。真正影响渲染效率的是选择器整体复杂度（比如嵌套过深、通配符滥用），而不是 nth-child 和 nth-of-type 的差异。

  兼容性方面，IE9+ 都支持，但 IE8 及更早版本完全不支持这两个伪类 —— 如果还要兼容，得用 class 手动标记或 JS 补充。

  最常被忽略的一点：它们都只作用于**直接子元素**。写成 section p:nth-of-type(1) 是合法的，但这里的 :nth-of-type(1) 是针对每个

  在其**各自父容器内**计数，不是在整个
  下所有
  统一排序。