.class:nth-child(n) 指父元素第n个子节点恰好是.class元素，而非筛选后取第n个；它受HTML结构严格限制，空白文本节点会导致匹配失败，目前无可靠CSS原生替代方案。
`.class:nth-child(n)` 从来就不是“按类名过滤后选第n个”
它实际意思是：父元素的第 n 个子节点，**恰好**是带有 .class 的元素。浏览器不会跳过其他兄弟节点去数“第几个 .class”，也不会先筛选出所有 .class 再取第 n 个。
常见错误现象：.item:nth-child(2) 没生效——因为父容器第 2 个子节点可能是文本、<div>、注释，甚至一个空格；只要不是 .item，整个选择器就匹配失败。
使用场景受限于 HTML 结构：只有当目标元素在父容器中连续排列、且前面没有其他类型或空白节点时，才可能碰巧生效。例如：
<ul> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> </ul>
这时 .item:nth-child(2) 才能选中第二个 <li>。但只要中间插一个 <li class="divider"> 或换行符生成的文本节点，就失效。
立即学习“前端免费学习笔记（深入）”；
`:nth-child(n of .class)` 是 CSS Level 4 新语法，但浏览器支持极差
这个写法看起来正是你想要的：“在所有带 .class 的子元素中，选第 n 个”。语法没错，但它属于 CSS Selectors Level 4，目前（2026年5月）仅 Safari 15.4+ 原生支持，Chrome / Firefox 仍需开启实验性标志，无法用于生产环境。
如果你在 DevTools 里试了没反应，大概率是浏览器不认——不是你写错了，是它根本没实现。
可验证的现状：
-
:nth-child(2 of .item)在 Safari 最新版中可用 -
chrome://flags/#enable-experimental-web-platform-features开启后 Chrome 可能支持，但不稳定 - 无 polyfill，JS 也无法模拟该伪类行为（CSS 解析阶段已终止）
真正可靠的做法：用 JS 补位或改用 data 属性
CSS 没原生方案，就得绕开。两种实操路径：
路径一：渲染时注入序号
- 服务端或 JS 渲染列表时，给每个
.item加上data-index="1"、data-index="2"等 - 然后用属性选择器：
[data-index="2"]或[data-index="3"] - 优势：完全可控，兼容所有浏览器，不影响结构语义
路径二：用 JS 动态加类
- 运行时遍历所有
.item，给第 n 个加.item--nth-2 - 再写样式：
.item--nth-2 { color: red; } - 注意：需在 DOM 就绪后执行，且要监听动态插入（如 React/Vue 列表更新）
别用 :nth-of-type() 替代——它只看标签名，不看 class。例如 button.item:nth-of-type(2) 要求前两个 button 都得带 .item，否则无效。
最容易被忽略的细节：空白文本节点就是“隐形杀手”
HTML 中的换行、缩进、空格，在 DOM 中都会生成文本节点，它们会计入 :nth-child() 的序号。比如：
<div class="list"> <div class="item">A</div> <div class="item">B</div> </div>
看似两个子元素，实际 DOM 子节点有 5 个：换行 + <div> + 换行 + <div> + 换行。所以 .item:nth-child(2) 匹配的是第 2 个节点——那个换行文本，不是 <div>。
解决方案只有两个：删掉模板里的换行（不现实），或放弃 :nth-child() 改用上述 JS 或 data 属性方案。这点在 SSR 或模板引擎中尤其容易踩坑。
