:nth-child(n of selector) 实际等于“没写”，因绝大多数浏览器未实现该css selectors level 4特性，旧引擎直接忽略整条规则，现代浏览器也仅实验性支持且需flag，无报错、难调试。
:nth-child(n of selector) 在绝大多数浏览器中根本不可用——它不是“兼容性差”，而是压根没实装。截至 2026 年 5 月，只有 Chrome 120+、Safari 17.4+ 和 Firefox 125+ 开始实验性支持该语法，且需启用 flag 或仅限部分上下文；所有 IE、Edge Legacy、旧版 Safari/Chrome 均完全忽略该写法，连解析都不做。
为什么 :nth-child(n of selector) 实际等于“没写”
这个语法是 CSS Selectors Level 4 的新增特性，语义是“在匹配 selector 的子元素中，取第 n 个”，比如 li:nth-child(2n of .active) 意图选中所有带 .active 类的 li 中的偶数位项。但问题在于：
- 它不向后兼容：旧引擎遇到不认识的伪类直接跳过整条规则，不会 fallback 到前半部分
- 即使现代浏览器支持，
of后的选择器也受限（不能含伪类、不能跨层级、不支持属性选择器中的复杂值） - DevTools 中常显示该规则为“invalid”或灰色禁用状态，但控制台不报错，极难定位
:nth-child() 本身已足够脆弱，别再叠 buff
你原本写的 li:nth-child(odd) 就可能因 DOM 中混入注释、div 或空文本节点而失效；加上 of .active 后，匹配逻辑变成“先筛 .active，再按物理位置编号”，但浏览器若不支持 of，就退化成 li:nth-child(odd) —— 而这个退化行为本身就不稳定。
- 真实翻车场景：
<ul> <li class="active">A</li> <div></div> <li class="active">B</li> </ul>→ 你期望选中 A（第1个 .active），但li:nth-child(odd of .active)在支持浏览器里确实能命中 A；不支持时，li:nth-child(odd)却会选中 A 和 B（因为 B 是第3个子元素） - 更糟的是：同一份 CSS，在 Chrome Canary 里生效，在正式版 Chrome 里静默失效，连 warning 都没有
用 class 替代是最稳的“降级”方案
与其赌浏览器支持度，不如把“第几个匹配项”这个逻辑提前算好，写死成 class。JS 只需一次遍历，比反复用 :nth-child() 计算快得多，也完全规避兼容性问题。
- 动态渲染场景：在插入节点后，立即执行
items.forEach((el, i) => el.classList.toggle('is-odd', i % 2 === 0)) - 服务端渲染或静态 HTML：构建时直接输出
class="item item--1 item--odd"，CSS 写.item--odd { background: #f5f5f5; } - 如果必须保留“每 3 个一组高亮第 1 个”的语义，用
item--group-1、item--group-2等明确 class，比:nth-child(3n+1)更易调试、可搜索、不依赖 DOM 结构纯净度
真要保 nth-child 语义？只用基础形态 + 严格 DOM 约束
如果你的项目仍需坚持用 :nth-child()（比如维护老代码），唯一可行路径是放弃 of，并主动约束结构：
- 确保父容器下**只有目标标签**（如
ul里只放li，删掉所有注释、空格文本节点） - 用
:nth-of-type()替代:nth-child()（它只计同类型标签，对混入的div不敏感，且兼容性略好） - 对表格等复杂结构，显式限定作用域：
tbody tr:nth-of-type(odd)，而非table tr:nth-child(odd)
真正麻烦的从来不是语法多难写，而是当它在某个用户手机上突然不生效时，你根本收不到任何报错信号——DOM 还在，样式只是悄悄消失了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
