:nth-child(n of S) 实际逻辑是：仅对父元素下匹配选择器S的直接子元素按DOM顺序重新编号并取第n个，不跳过非S元素，且要求父元素为块级容器、S为简单选择器；目前仅Chromium 119+支持，Firefox/Safari未实现。
什么是 :nth-child(n of S) 的实际筛选逻辑
它不是“在符合选择器 S 的元素中数第 n 个”，而是“对所有兄弟元素做一次预过滤，再对匹配 S 的那些按 DOM 顺序重新编号，取第 n 个”。关键在于：编号只针对 S 匹配的子元素，但这些子元素必须是同一父容器的直接子节点。
常见误解是以为它能跨层级或忽略非匹配元素的位置——其实不能。比如 div:nth-child(2 of .active) 不会跳过前面不带 .active 的 div，而是先找出所有子元素里带 .active 的 div，再看它们在各自同级中的顺序。
:nth-child(n of S) 的浏览器支持与启用条件
这个语法属于 CSS Selectors Level 4，目前仅 Chromium 内核（Chrome 119+、Edge 119+、Opera 105+）原生支持，Firefox 和 Safari 尚未实现。使用前必须确认运行环境。
即使在支持浏览器中，也需注意：
- 父元素必须是块级容器（如 div、section），不能是 span 这类内联元素（否则无“子元素”语义）
- S 必须是简单选择器或组合选择器（如 .item、li[data-type="user"]），不支持伪类嵌套（如 :hover）或函数式伪类（如 :is()）
- n 可以是数字、odd、even 或 an+b 形式，但不能是变量或 CSS 自定义属性
替代方案：当 :nth-child(n of S) 不可用时怎么模拟
主流兼容方案仍是 JavaScript 配合类名控制，但纯 CSS 下可拆解为两步：
立即学习“前端免费学习笔记（深入）”；
- 先用 :is() 或 :where() 定位目标类型（如 :is(.active, .pending)）
- 再结合 :nth-of-type() 或相邻兄弟选择器逼近效果（局限大，仅适用于标签类型固定场景）
- 更可靠的是反向操作：给符合条件的元素批量加序号类，例如用 JS 执行 Array.from(parent.querySelectorAll('.active')).forEach((el, i) => el.classList.add(`active--nth-${i + 1}`))，然后写 .active--nth-3 { ... }
注意：CSS @counter-style 和 counter-increment 无法用于条件筛选，仅适用于计数显示。
容易被忽略的 DOM 结构陷阱
这个伪类对 DOM 结构极其敏感。以下情况会直接失效：
- 父元素里混有注释节点、文本节点（哪怕只是换行空格）——它们也算“子节点”，会影响 S 匹配元素的实际位置编号
- 使用了 display: contents 的中间容器，会让子元素“冒泡”到上层，破坏原本的父子关系
- 动态插入/删除节点后未重置状态，旧的序号类可能残留，而 :nth-child(n of S) 是实时计算的，两者行为不一致
调试建议：打开开发者工具，在 Elements 面板手动删掉空白文本节点，再观察样式是否生效；或者用 console.log(Array.from(el.parentNode.children).map(c => [c.tagName, c.className])) 检查真实子节点序列。
