:nth-child(2 of .item) 不生效主因是浏览器兼容性不足，截至2026年10月仅Chrome125+、Edge125+、Safari17.4+稳定支持，Firefox仍需手动启用；其匹配逻辑是在父元素直接子节点中按DOM顺序筛选符合选择器的节点再计数，非先找所有.item再取第2个。
为什么 :nth-child(2 of .item) 不生效？
直接写 :nth-child(2 of .item) 大概率没效果，不是语法错，而是浏览器支持还没铺开。截至 2026 年 10 月，of 关键词仅在 Chrome 125+、Edge 125+ 和 Safari 17.4+ 中稳定可用，Firefox 仍处于实验阶段（需手动开启 layout.css.nth-child-of.enabled）。用前务必检查目标环境的兼容性。
常见错误现象：:nth-child(2 of .card) 写了但样式完全不应用，开发者工具里连匹配项都不显示——大概率是浏览器不认这个语法。
:nth-child(n of S) 的真实匹配逻辑
它不是“先找所有 .item，再取第 2 个”，而是：在父元素所有**直接子节点**中，按 DOM 顺序逐个检查，只把符合选择器 S 的节点纳入计数范围，然后看第 n 个被计入的节点是谁。
-
:nth-child(2 of li)：只数<li>标签，跳过<div>、注释、空文本节点 -
:nth-child(2 of [data-role="button"])：只数带该属性的元素，不管标签名 -
:nth-child(2 of .active:not(.disabled))：支持复合选择器，但注意括号必须成对、不能嵌套伪类
⚠️ 注意：of 后面的选择器 S 必须能独立匹配单个元素（即不能含 :hover、:focus 这类状态伪类），也不能含后代选择器（如 .list .item）。
立即学习“前端免费学习笔记（深入）”；
替代方案：当 of 不可用时怎么选“第 N 个某类元素”？
没有 of 时，:nth-child() 和 :nth-of-type() 都无法精准满足“第 N 个带 class 的元素”这类需求。可靠做法只有两个：
- 服务端或 JS 渲染时，给目标元素加明确 class，比如
class="item item--2nd"，再用.item--2nd直接选 - 用 JS 动态标记：
document.querySelectorAll('.item')[1]?.classList.add('target')，再配 CSS 规则 - 退而求其次用
:nth-of-type()+ 类名组合，但仅限于同标签场景（如全是<div class="item">），且要接受它会漏掉中间混入的其他标签
别硬套 :nth-child(-n+2) 或 :nth-child(2n) ——它们数的是位置，不是类型，一旦 DOM 结构变化，结果就偏移。
容易被忽略的细节
of 语法真正难的不是写法，而是 DOM 结构感知。即使浏览器支持，如果父元素下有注释节点、空格文本节点、<script> 或 SSR 注入的占位符，都会影响“第几个”的实际指向。最稳妥的做法始终是：打开开发者工具 → 右键父元素 → “Edit as HTML” → 看真实子节点序列，再反推你要的 n 值。
