:nth-child(2 of .item) 在 chrome/firefox 中不生效，因其属 css selectors level 4 新语法，截至2026年6月仅 safari 15.4+ 原生支持；chrome/firefox 即使启用实验标志也不稳定，无法用于生产环境，且无 polyfill 可用。
为什么 :nth-child(2 of .item) 在 Chrome/Firefox 里不生效
不是你写错了，是浏览器根本没实现这个语法。它属于 CSS Selectors Level 4 标准，目前（2026年6月）只有 Safari 15.4+ 原生支持；Chrome 和 Firefox 即使开启 chrome://flags/#enable-experimental-web-platform-features，行为也不稳定，生产环境不能依赖。
常见错误现象：.item:nth-child(2 of .item) 在 DevTools 里加了但样式没应用，检查 computed styles 也看不到——说明解析阶段就被忽略，连匹配逻辑都没走。
- 别指望 polyfill：CSS 解析发生在渲染引擎早期，JS 无法拦截或模拟该伪类
- 别在 Vue/React 动态列表里硬试：DOM 变更后不会自动重触发该选择器（它压根不被识别）
- 用 Safari 验证可行 ≠ 全平台可用：Safari 用户占比仍有限，且旧版 Safari（
.item:nth-child(2) 看似简单，为什么经常选不到？
.item:nth-child(2) 的意思是：“父元素的第 2 个子节点，恰好是 .item 元素”。它不跳过非 .item 节点，也不过滤文本节点。
典型失效场景：
- HTML 中有换行或空格：
<ul>\n <li class="item">1</li>\n <li class="item">2</li>\n</ul>—— 换行符生成的文本节点会占据第 2 位 - 中间插入其他元素：
<li class="item">1</li> <li class="divider"> <li class="item">2</li>—— 第二个.item是第 3 个子节点 - 使用
display: contents或flex布局时，某些浏览器对子节点顺序的计算方式有差异
真正能落地的两种替代方案
绕开 CSS 层限制，用可控方式标记“第 N 个匹配项”：
-
服务端或构建时注入
data-index：在生成 HTML 时，遍历所有.item，按顺序写入data-index="1"、data-index="2"……然后用[data-index="2"]精确命中。兼容性 100%，无运行时开销 -
JS 运行时打标：DOM 就绪后执行
document.querySelectorAll('.item').forEach((el, i) => el.classList.add(`item--nth-${i + 1}`))，再写.item--nth-2 { … }。注意需监听后续动态插入（如 MutationObserver），否则 React/Vue 列表更新后失效
别用 :nth-of-type() 替代：它只认标签名（如 li:nth-of-type(2)），完全忽略 class，跟“按类名筛选”无关。
别踩的坑：组合伪类也救不了 :nth-child(of .class)
有人尝试 .item:nth-child(n):not(.other-class) 或 .item:first-child ~ .item 来模拟，这些都只是“碰巧在特定结构下有效”，本质仍是基于位置而非筛选后序号。
关键区别必须认清：:nth-child(n of .class) 是语义上“第 n 个匹配项”，而所有现有 CSS 伪类（包括 :is()、:where()）都无法改变 :nth-child 的底层计数逻辑——它永远数的是父元素下的全部子节点顺序。
如果结构不可控、又必须精确控制第 N 个同类元素的样式，JS 打标或 data- 属性是目前唯一可靠路径。CSS 自身在这个问题上，确实留了白。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
