:nth-child会意外失效，因它按父元素所有子节点（含文本、注释、其他标签）物理序号匹配，若第2个子节点非p则p:nth-child(2)不生效；而:nth-of-type只统计同标签兄弟，更精准匹配“第n个p”。
什么时候用 :nth-child 会意外失效
常见现象：写好 p:nth-child(2)，但第二个 <p> 没变色，甚至完全不生效。
原因很直接：浏览器先数父元素下所有子节点（包括 <div>、<span>、文本节点、注释 <!-- -->），再检查“第 2 个是不是 p”。只要第 2 个是别的标签或空白，就匹配失败。
- HTML 中换行缩进产生的空格/换行，会被解析为文本节点，悄悄占掉一个序号
-
div:nth-child(3)可能命中的是<header>，只因它是第 3 个子节点 - 在 CMS 或 SSR 输出的 HTML 里，结构不可控，
:nth-child容易“失焦”
什么时候必须用 :nth-of-type
当你真正想表达的是“第 n 个 p”“第 3 个 img”，而不是“坐在第 n 个座位上的 p”——那就该用 :nth-of-type。
它会自动过滤出所有同类型兄弟元素（比如只看 p），然后在其中按顺序编号。前面插了几个 h2 或 div，完全不影响计数。
立即学习“前端免费学习笔记（深入）”；
-
p:nth-of-type(2)在<h2></h2><p>1</p><div></div><p>2</p>中稳稳选中第二个p - 适合图文混排、卡片列表、表单字段组等真实项目结构
- 对 DOM 动态插入更鲁棒：在开头加个
<aside>，:nth-of-type结果不变
:nth-child(odd) 和 :nth-of-type(odd) 的实际差异
两者语法一样，但语义完全不同：
-
tr:nth-child(odd)：表格中第 1、3、5… 行（含<thead>、<tbody>所有tr），常用于整表隔行变色 -
tr:nth-of-type(odd)：只在同为tr的兄弟中数奇数位——但如果<tbody>外还有tr，结果可能跨区域错乱 - 更安全的做法是限定作用域：
tbody tr:nth-child(odd)，既明确范围，又保持按视觉位置计数
容易被忽略的底层细节
两者都不匹配伪元素（如 ::before），也不把自闭合标签（如 <img>、<input>）当作“类型可计数”的兄弟——它们参与 :nth-child 计数，但不进入 :nth-of-type 的同类筛选池。
另外，IE9+ 支持二者，但 IE8 及更早版本完全不支持；性能上无差别，真瓶颈往往来自选择器嵌套过深或滥用通配符，而不是伪类本身。
