:nth-child(an+b of S) 是 CSS Selectors Level 4 新特性，非 CSS3，Chrome 110+/Firefox 117+/Safari 16.4+ 才支持，旧版浏览器完全忽略；不支持公式如 2n+1，仅允许单点如 :nth-child(1 of .item)；兼容方案包括 :nth-of-type()、data 属性或 JS 动态加类。
:nth-child(an+b of S) 这个语法根本不存在于 CSS3 —— 它是 CSS Selectors Level 4 的新特性，Chrome 110+、Firefox 117+、Safari 16.4+ 才开始支持，且不向后兼容。你用它写 CSS3 项目，旧版浏览器会直接忽略整条规则。
为什么 :nth-child(2n of .active) 在大多数项目里会失效
这个写法不是“CSS3 增强版”，而是全新标准，浏览器支持断层极大：
-
:nth-child(2n of .active)在 Chrome 109 或 Edge 119 下完全无效，连解析都不解析，DevTools 里都看不到这条规则被加载 - 哪怕写了
@supports (selector(:nth-child(1 of .foo)))，IE 和所有安卓 WebView（含微信内置）仍无任何 fallback 能力 - 伪类内部的
of不是运算符，而是语法关键字：前后必须有空格，:nth-child(2n of.active)或:nth-child(2n of .active)（少空格）都会静默失败 -
n只接受正整数，:nth-child(2n+1 of .item)是非法的——Level 4 当前只允许:nth-child(1 of .item)、:nth-child(2 of .item)这种单点定位，不支持公式
想“在 .active 元素中选第 3 个”，实际能用的替代方案
别硬套新语法，按真实 DOM 结构和兼容性分层处理：
- 如果目标元素标签统一（比如全是
button），用button.active:nth-of-type(3)：它跳过非button兄弟，只对带.active的button计数（前提是该 class 不被其他button意外复用） - 如果结构可控，HTML 层加语义属性：
<button class="item" data-index="3"></button>，然后写button[data-index="3"]—— 简单、稳定、零兼容性问题 - 如果必须动态响应（如 Vue 的
v-if导致 DOM 不连续），CSS 无解，得用 JS 给第 3 个匹配.active的元素加临时 class，再用.item--third控制样式 - 避免用
:nth-child(n+3):not(:nth-child(n+4))之类组合“模拟”，因为只要父容器里混入注释、<script></script>或空白文本节点，序号就全偏移
容易被忽略的 DOM 干扰源
即使你写对了语法，也常被看不见的节点破坏效果：
立即学习“前端免费学习笔记（深入）”；
- HTML 注释
<!-- banner -->算作一个子节点，会把第一个.item从:nth-child(1)推到:nth-child(2) - 模板引擎（如 Pug、Jinja）生成的换行缩进，在 DOM 中变成空白文本节点，同样参与
:nth-child()计数 -
<svg></svg>、<template></template>、<slot></slot>标签在父容器内时，也会占位计数，但开发者工具 Elements 面板默认折叠它们，容易误判 - 用
document.querySelectorAll('.parent > *')在 Console 里手动数一遍真实子节点，比肉眼检查 HTML 更可靠
真正难的不是写出 :nth-child(3 of .item)，而是确认你的用户有多少在用 Chrome 110+，以及是否愿意为这行代码放弃 iOS 15.6 以下所有 Safari 用户 —— 很多时候，加个 data-ordinal="3" 更快、更稳、更可测。
