:nth-child(An+B of S) 并非先过滤再编号，而是先按DOM顺序定位第An+B个子元素，再检查其是否匹配S；若不匹配则跳过，不会回退或继续查找，且S必须为简单选择器。
什么是 :nth-child(An+B of S) 的真实过滤能力
它**不能真正“过滤”元素**，而是先按 DOM 顺序定位第 An+B 个子元素，再检查该元素是否匹配选择器 S；不匹配就跳过，不回退重算。很多人误以为它像 JS 的 filter() 那样遍历所有符合条件的元素再取第 N 个——实际不是。
:nth-child(2n of .item) 为什么常失效
这个写法看似想选“所有 .item 中的偶数位”，但浏览器会：① 找到父容器的第 2、4、6…个子节点；② 检查这些节点是否为 .item；③ 只有同时满足才命中。如果第 2 个子节点是 <div> 而非 <code>.item，这一轮就完全跳过，不会继续往后找第二个 .item。
- ✅ 正确用法：
:nth-of-type(2n)（仅限同标签）或:is(.item):nth-child(2n)（需注意 DOM 位置） - ❌ 错误期待：
:nth-child(2n of .item)不等于“第 2/4/6…个.item” - ⚠️ 兼容性：Chrome 119+、Firefox 110+、Safari 15.4+ 支持，旧版直接忽略整条规则
替代方案：如何真正拿到“第 N 个匹配元素”
纯 CSS 没有“全局过滤后编号”的机制，必须靠结构配合或 JS 补足：
- 把目标元素集中放在连续子节点位置（如用
display: contents剥离包装容器，让目标直系子化） - 用
:has()+:nth-child()组合（例如ul:has(.item:nth-child(3)) .item:nth-child(3)，但无法泛化） - 更可靠的做法：JS 动态加类，如
document.querySelectorAll('.item')[2]?.classList.add('item--third') - 构建时控制 HTML 结构，避免依赖运行时过滤逻辑
调试时最容易忽略的一点
of S 中的 S 必须是**简单选择器**（不能含空格、+、~、:not() 等），否则整个伪类无效且静默失败。比如 :nth-child(2n of .item.active) 合法，但 :nth-child(2n of .item .child) 或 :nth-child(2n of :is(.a, .b)) 会被浏览器直接丢弃。
立即学习“前端免费学习笔记（深入）”；
真要处理复杂条件，别硬套 of，优先拆解结构或换 JS——CSS 的“过滤”本质是位置校验，不是集合运算。
