:nth-child() 不支持 of 语法，也不接受复杂选择器；浏览器会忽略 li:nth-child(2n of .active) 等写法；混淆源于与 :nth-of-type() 名称相似及对 :is() 或未标准化提案的误读。
:nth-child() 不支持 of 语法
直接说结论：:nth-child() 根本没有 of 关键字，也**不接受复杂选择器作为其内部条件**。你写不出 li:nth-child(2n of .active) 或 div:nth-child(3n of [data-role="item"]) 这类语法——浏览器会直接忽略整条规则。
为什么会有“of”误解？
混淆通常来自两个地方：
-
:nth-child()和:nth-of-type()名称相似，但后者也**不支持of**；它只按标签名（如p、li）统计同类型兄弟节点，不能加类名或属性筛选 - 有人把 CSS 的
:is()或将来可能的提案（如:nth-match()，尚未进入标准）误当成已支持特性；目前所有主流浏览器（Chrome/Firefox/Safari/Edge）均未实现of语法
真正可行的替代方案
想实现“在满足某条件的元素中，每隔 n 个生效”，必须拆解逻辑，用组合选择器或预处理手段：
- 先用属性/类名筛选范围，再用
:nth-child()做位置匹配 —— 但前提是这些目标元素在 DOM 中连续且序号可控：[data-status="active"]:nth-child(3n)只有当第 3、6、9… 个子元素恰好都带data-status="active"才有效，否则不命中 - 用
:nth-of-type()+ 统一标签 + 类控制：把目标元素统一写成<article class="item active"></article>，再用article.active:nth-of-type(3n)—— 它只数article标签，.active是附加过滤（需确保该类不被其他article意外使用） - 动态场景（如 Vue/React 中 v-if 或条件渲染导致 DOM 不连续）：CSS 无法可靠响应，必须交由 JS 控制 class（例如
item--every-third），或改用grid-area/display: grid配合nth-child()做布局级控制
最容易被忽略的兼容性陷阱
哪怕写法合法，实际效果也可能因 DOM 结构“隐形污染”而失效：
立即学习“前端免费学习笔记（深入）”；
- HTML 注释
<!-- -->、文本节点（如换行缩进）、<script>或<svg>标签，都会被:nth-child()当作子元素计数，导致序号偏移 -
:nth-child(3n)匹配的是“第 3、6、9… 个子元素”，不是“第 3、6、9… 个目标元素”——这点一旦 DOM 动态变化，样式就容易断连，比想象中更脆弱
