:nth-child(n of .class)是CSS Selectors Level 4新增语法，先按.class过滤子元素再重新编号取第n个，非传统:nth-child的增强版；它严格要求.of前后空格、仅支持具体数字、仅作用于直接子元素，且浏览器支持有限（Chrome 110+/Firefox 117+/Safari 16.4+）。
nth-child(n of .class) 是什么，它真能跳过无关元素？
它不是“增强版 :nth-child”，而是 CSS Selectors Level 4 引入的**全新语法**，专门解决“只对带某 class 的子元素重新编号后取第 n 个”这个老难题。它和 :nth-child(n) 完全不同：后者数所有子节点，前者先按 .class 过滤，再在过滤结果里按 1、2、3… 编号。
为什么不能直接用 .class:nth-child(n)？
因为 .class:nth-child(n) 仍是基于父元素全部子节点的位置判断——它要求“第 n 个子节点恰好有 .class”，而不是“在所有 .class 元素中排第 n 个”。常见失败场景：
- 父元素开头有
<div class="skip">或 HTML 注释，导致第一个.item实际是第 2 个子节点，.item:nth-child(1)就永远不匹配 - 中间穿插了
<p>、<span>等非目标元素，序号错位 - 想选“第三个 .btn”，但 DOM 里它是第 7 个子节点，硬写
.btn:nth-child(7)脆弱且不可维护
如何正确使用 :nth-child(n of .class)？
语法严格，空格和顺序不能错：:nth-child(3 of .item) 表示“在所有 .item 兄弟中排第 3 个的元素”，不管它在父元素里物理位置是几。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 必须写成
:nth-child(<em>n</em> of <em>selector</em>)格式，of前后各一个空格，.class部分支持完整选择器（如.item.active、li[data-type="primary"]） - 浏览器支持有限：Chrome 110+、Firefox 117+、Safari 16.4+；Edge 同 Chrome；旧版全不支持，需用
@supports降级 - 不支持负数或公式，只接受具体数字（
1、2、3），不能写:nth-child(2n+1 of .item) - 若目标元素没有同类型兄弟（比如只有一个
.item），:nth-child(1 of .item)仍可生效；但:nth-child(2 of .item)永远不匹配
示例：
/* 仅给第三个 .card 加阴影，无视前面的 .ad、.spacer */
.card:nth-child(3 of .card) {
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
<p>/<em> 选中第一个带 data-priority="high" 的 button </em>/
button:nth-child(1 of button[data-priority="high"]) {
border: 2px solid #ff4d4f;
}兼容性差时怎么 fallback？
别试图用 JS 模拟或一堆 class 手动标记——太重。更务实的做法：
- 用
@supports包裹新语法，旧浏览器走传统方案：button.priority-1+ 手动加 class - 对简单场景（如只取前 3 个），用组合选择器：
.item:nth-of-type(1), .item:nth-of-type(2), .item:nth-of-type(3)—— 虽不完美，但比:nth-child抗干扰 - 真正需要动态过滤时，CSS 已不是最佳工具；优先考虑用
data-属性 + JS 动态加 class，样式规则写死在 class 上
最常被忽略的一点：这个语法只作用于**直接子元素**，不支持后代。写成 ul li:nth-child(2 of .active) 是无效的——必须是 ul > li:nth-child(2 of .active)，且 .active 必须是 ul 的直接子 li。
