应选:nth-of-type(n)。因为:nth-child(n)按父元素所有子元素总序号匹配，易受换行、注释等干扰；:nth-of-type(n)只按同标签类型顺序匹配，更稳定可靠，适用于混排DOM的绝大多数业务场景。
选第几个？先搞清“数谁”
根本区别就一句话：:nth-child(n) 数的是父元素下所有子元素的总序号，:nth-of-type(n) 数的是同标签类型中第几个。样式不生效，90% 是因为没想清楚自己到底想“按位置选”还是“按类型顺序选”。
比如：p:nth-child(2) 只认“第二个座位”，且必须坐的是 p——如果第二个子元素是 div 或注释节点，哪怕后面有十个 p，它也不匹配任何元素；p:nth-of-type(2) 不管前面插了多少 h3、span 或空白文本节点，只要它是父元素里出现的第二个 p，就稳稳命中。
DOM 中有换行、注释或混排时，:nth-child 容易失效
真实 HTML 很少是纯 li 或纯 p 堆叠。一旦出现 h3、div、span 与目标标签交错，:nth-child 就容易“失焦”。
- DOM 中的文本节点（比如换行缩进产生的空白）会被计入子元素序号，导致
:nth-child(2)实际匹配到一个看不见的文本节点，而非你预期的第二个p - 注释
<!-- -->同样算作子节点，会悄悄偏移序号 -
:nth-of-type完全免疫这类干扰，因为它只看同类型元素的出现顺序
什么时候该用 :nth-child？
只有当你明确需要“按结构位置控制样式”时才用 :nth-child，典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- 表格隔行变色：
tr:nth-child(even)—— 这里依赖的是tr在tbody中的绝对位置，混入其他标签反而会破坏逻辑 - 栅格系统中固定列宽布局，如
div:nth-child(3n+1)控制每行首项左间距 - 配合
:first-child/:last-child做边界处理，前提是结构严格可控
注意：:nth-child 的公式（如 3n+1）计算结果必须 ≥ 1 才有效；n 从 0 开始代入，所以 3n-1 在 n=0 时得 -1，无效。
复杂嵌套中优先用 :nth-of-type
绝大多数业务场景——图文列表、新闻卡片、表单字段组、评论流——HTML 都是混排的。这时 :nth-of-type 更可靠、更符合直觉。
常见误用：div.my-class:nth-child(2) 想选“带 my-class 的第二个 div”，但实际含义是“第二个子元素，且是 div 并带 my-class”。如果第二个子元素是 h2，整个选择器就失效。
真正想表达“第二个带 my-class 的 div”，应改用：div.my-class:nth-of-type(2) —— 它先过滤出所有 div.my-class，再从中取第二个。不过要注意：浏览器仍按标签名分组，.my-class 不参与类型判断，所以它等价于 div:nth-of-type(2).my-class。
最易被忽略的一点：两者在解析性能和兼容性上几乎无差别，现代浏览器（Chrome 100+、Firefox 115+、Safari 17+）都已无差异。别为“性能”牺牲可维护性，优先选语义更清晰的那个。
