因为:nth-child(n)按父元素所有子节点（含文本、注释）的DOM顺序计数且不区分类型，.class:nth-child(n)要求第n个子节点恰好是该类元素；若前有其他标签或空白节点，就会匹配失败。
为什么 .class:nth-child(n) 经常选不到想要的元素
因为 :nth-child(n) 检查的是父元素下第 n 个子节点是否匹配该选择器，而不是“第 n 个带这个类的元素”。如果目标元素前面有其他兄弟元素（比如 <div>、<span> 或文本节点），序号就会错位。常见错误现象是：明明写了 .item:nth-child(2)，却没生效，或者意外选中了别的元素。
使用场景通常是列表渲染后想单独样式化第 2 个、第 3 个等特定位置的同类元素，但 HTML 结构不全是同类型标签或中间夹杂了其他内容。
- 若父容器中所有子元素都是
<li class="item">且无其他节点，.item:nth-child(2)可用 - 若父容器是
<ul>，但里面混有<li class="divider">或注释/空格文本节点，:nth-child就不可靠 - 参数
n支持数字（如3）、公式（如2n+1）或关键字（如first），但始终基于 DOM 树位置，而非类筛选后的逻辑序号
更靠谱的替代方案：:nth-of-type() 和 :nth-child() 的组合判断
:nth-of-type(n) 只看同标签类型的序号，比 :nth-child 稍稳定些，但仍不认类名。真正解决“第 n 个带某类的元素”问题，得靠 :nth-child() 配合结构约束——前提是能控制 HTML 结构。
例如，当所有目标元素都是 <div class="card">，且它们在父容器中连续排列、中间没有其他 <div>，可用：
立即学习“前端免费学习笔记（深入）”；
.card:nth-child(3) {
border: 2px solid red;
}
但如果父容器是 <section>，里面穿插着 <p>、<h3>，那必须换思路：
- 改用 JavaScript 动态加标识类（如
data-index="2"），再用 CSS 选[data-index="2"] - 服务端或构建时预计算并写死序号类，如
card--first、card--second - CSS 新特性
:has()尚未全兼容，暂不推荐生产环境依赖（parent:has(.item:nth-of-type(2)) .item:nth-of-type(2)写法复杂且无效）
实际调试时怎么快速验证是否选中了正确元素
打开浏览器开发者工具，在 Elements 面板中右键目标元素 → “Break on” → “Attribute modifications”，然后临时删掉它的类名再加回来，观察样式是否实时变化；或者直接在 Styles 面板里手动勾选/取消该 CSS 规则，看效果是否符合预期。
- 检查 computed 样式里是否有该规则生效，如果没有，说明选择器根本没匹配上
- 在控制台运行
document.querySelectorAll(".my-class")看返回列表顺序，再对比document.querySelector(".my-class:nth-child(2)")是否为undefined - 注意空格和换行可能生成文本节点，让
:nth-child(2)实际指向一个空白文本节点，此时该伪类不匹配任何元素
真正按“第 n 个同类元素”选中的唯一可靠方式
纯 CSS 没有 .class:nth-of-class(n) 这种语法，这是长期缺失的功能。目前唯一 100% 可控的做法，是让每个目标元素自带序号信息：
<div class="item" data-order="1"></div> <div class="item" data-order="2"></div> <div class="item" data-order="3"></div>
然后写：
.item[data-order="2"] {
background: #ffeb3b;
}
这要求你在生成 HTML 时就知道序号，对静态页面或服务端渲染友好；对动态列表（如 React/Vue），可在渲染循环中用索引设置 data-order 属性。别小看这个属性——它绕过了所有伪类的结构陷阱，也避免了 JS 操作 DOM 的开销。
容易被忽略的一点：CSS 选择器性能上，属性选择器比伪类略慢，但在现代浏览器中差异可忽略；真正影响体验的是误以为 .class:nth-child(n) 能通用，结果花半天调样式却发现结构一变就失效。
