:nth-child(n) 先按父元素子序号匹配再验证样式条件，不筛选后计数；类名、属性不影响计数，仅作附加判断；真实DOM结构（含注释/文本节点）决定序号，与CSS选择器层级无关。
子选择器（>）和 :nth-child(n) 的匹配顺序是反直觉的
很多人以为 .parent > .item:nth-child(2) 是“先找所有 .item，再从中选第 2 个”，实际浏览器执行顺序是：**先按 :nth-child(2) 找出父元素的第 2 个子元素，再检查它是否同时匹配 .item 和 .parent > 的父子关系**。
这意味着只要第 2 个子元素不是 .item，整条规则就失效——哪怕后面有十个 .item，也完全不参与计数。
-
.list > li:nth-child(3)只会匹配“.list的第 3 个子元素”，且该元素必须是li；如果第 3 个是<div class="ad">，那这条规则就不生效 <li>子选择器 <code>>不改变:nth-child()的计数范围，它只约束最终候选元素的层级关系 - 常见误判场景：HTML 里
li前有注释、空格文本节点或<span class="sep"></span>，导致li实际位置远大于你写的数字 - 想对带特定类的元素做序号控制，必须用新语法：
div:nth-child(2n of .card.active)（Chrome 125+ / Firefox 127+ / Safari 17.4+） - 旧写法中，类名只是附加条件，不影响计数逻辑，也不“过滤后再编号”
- 调试时可用
Array.from(el.parentNode.children).map((c, i) => [i + 1, c.className])看真实子元素序列和类名分布 -
div:nth-child(2)：要求第 2 个子元素恰好是div，否则无匹配 -
div:nth-of-type(2)：忽略中间的p、span，只数div，第 2 个就命中 - 如果你的目标语义是“第二个 div”，而不是“排在第二位的 div”，就该用
:nth-of-type；反过来，若布局强依赖 DOM 顺序（比如栅格间隙控制），才用:nth-child - 空白文本节点（换行缩进）会被
:nth-child计入，但不会影响:nth-of-type - 错误写法：
.container > .item:nth-child(2)→ 实际等价于.container > :nth-child(2).item，即“.container的第 2 个子元素，且是.item” - 正确写法（如需控制
.wrapper下第 2 个.item）：.wrapper > .item:nth-child(2) - SCSS 中嵌套写法
.wrapper { .item:nth-child(2) { ... } }依然遵循相同规则，别被缩进误导 - 最稳妥的验证方式：在 DevTools 中右键目标
.item→ “Reveal in Elements panel”，然后看它的父节点下所有子节点构成（含注释/文本节点）
混用类名和 :nth-child 时，类名不参与计数
.card.active:nth-child(2) 并不是“在所有 .card.active 中选第 2 个”，而是“第 2 个子元素，且它同时有 .card 和 .active”。如果第 2 个子元素是 <div class="card">（缺 <code>active），或第 1 个是 <div class="card active">、第 2 个是 <code><p></p>，那它就完全不匹配。
:nth-child(n) 和 :nth-of-type(n) 在混合结构中结果不同
当父容器里混着 div、p、section 甚至注释节点时，div:nth-child(2) 和 div:nth-of-type(2) 极大概率指向不同元素——前者看“第几个子”，后者看“第几个 div”。
立即学习“前端免费学习笔记（深入）”；
嵌套层级过深时，:nth-child 作用域容易被误解
.container .item:nth-child(2) 中的 :nth-child(2) 永远相对于其**直接父元素**，不是 .container。如果 .item 的父级是 .wrapper，那它数的是 .wrapper 的子元素，和 .container 完全无关。
真正容易被忽略的点是：:nth-child 的计数永远基于真实 DOM 树结构，不因 CSS 类、属性或 JS 动态操作而改变；一旦 HTML 插入了不可见节点（比如服务端渲染注入的注释、框架生成的空文本），旧的 n 值就可能全部偏移——这时候靠猜不如直接查 parentNode.children。
