:nth-child(n of .class)是CSS Selectors Level 4新增的全新语法，先按.class过滤子元素再重新编号取第n个，能真正跳过无关元素；它要求.of前后有空格、n仅支持正整数、仅作用于直接子元素，且仅Chrome 110+/Firefox 117+/Safari 16.4+支持。
什么是 :nth-child(n of .class)，它真能跳过无关元素？
它不是对 :nth-child(n) 的增强，而是 CSS Selectors Level 4 引入的全新语法，专门解决“只在带某 class 的兄弟元素中重新编号、再取第 n 个”这个长期痛点。:nth-child(3 of .item) 的意思是：先从父元素所有子节点里挑出所有匹配 .item 的元素，按它们在兄弟中的逻辑顺序（1、2、3…）重新编号，再选第 3 个——完全无视中间夹着的 <div class="ad">、注释、换行文本节点等干扰项。<h3>为什么不能直接用 .class:nth-child(n)？</h3>
<p>因为 <code>.item:nth-child(3) 仍是在数父元素的全部子节点物理位置：它要求“第 3 个子节点恰好是 <li class="item">”，而不是“所有 .item 中排第 3 个”。常见失效场景包括：
- 父容器开头有
<!-- comment -->或<div class="skip">，导致第一个 <code>.item实际是第 4 个子节点 - DOM 里有换行缩进生成的空白文本节点，悄悄占了序号
- 想选“第三个按钮”，但它在父元素里是第 7 个子节点，硬写
button:nth-child(7)脆弱且不可维护 -
of前后必须各有一个空格，写成:nth-child(2of.item)或:nth-child(2 of.item)都不生效 -
n只能是正整数（1、2、3），不支持公式如2n+1、负数或0 -
selector部分支持完整选择器，比如.btn.primary、li[data-role="nav"]，但仅作用于直接子元素（不递归后代） - 浏览器支持仍有限：Chrome 110+、Firefox 117+、Safari 16.4+；旧版全不支持，必须用
@supports包裹降级
怎么写才有效？有哪些硬性限制？
:nth-child(n of selector) 语法极其严格，错一个空格或符号就无效：
示例：
立即学习“前端免费学习笔记（深入）”；
.card:nth-child(3 of .card) { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
button:nth-child(1 of button[data-priority="high"]) { border: 2px solid #ff4d4f; }兼容性差时该怎么 fallback？
别写一堆 JS 动态加 class，也别用 :nth-of-type 生搬硬套（它只认标签名，不认 class）。更务实的做法是：
- 用
@supports (selector(:nth-child(1 of .foo))) {}包裹新语法，并在外部写降级规则（比如用.card:nth-of-type(3)或加固定 class.card--third） - 如果目标元素结构可控，直接在 HTML 里加语义化 class（如
data-index="3"），CSS 里用属性选择器兜底 - 注意：当父元素下只有一个
.item时，:nth-child(1 of .item)仍可生效；但:nth-child(2 of .item)永远不匹配——这点容易被忽略，调试时得确认过滤后是否真有足够多匹配项
