:nth-child(n)常选不到元素是因为它按父元素所有子节点（含文本、注释）的DOM顺序计数，不区分标签类型；应优先用:nth-of-type(n)或:is()配合解决。
nth-child(n) 为什么经常选不到想要的元素
因为 :nth-child(n) 是按「父元素下所有子元素的顺序位置」计数，不区分标签类型。比如父容器里有 <div>、<code><p></p>、<ul></ul> 混排，li:nth-child(2) 只有在第二个子元素恰好是 <li> 时才生效，否则匹配失败。
常见错误现象：ul li:nth-child(3) 写了却没高亮第三项——实际可能是前两个子元素是注释、空格文本节点，或 <li> 前插了 <span></span>。
- 用浏览器开发者工具「Elements 面板」右键目标
<li>→ 「Scroll into view」，再看它在父节点下的真实序号（注意：文本节点、注释也算子节点） - 优先考虑
:nth-of-type(n)：它只对同类型标签计数，li:nth-of-type(3)就稳稳选中第三个<li>，忽略中间穿插的其他标签 - 若必须用
:nth-child，可先用:is()或属性选择器缩小范围，例如：ul > :nth-child(4):is(li, a)
类型选择器 + nth-child 的组合写法与优先级陷阱
写成 li:nth-child(2n) 是合法的，但要注意 CSS 选择器优先级规则：类型选择器（li）和伪类（:nth-child()）权重相同，都是 0-1-0，不会因为加了类型就“更准”。真正影响匹配结果的是结构而非写法。
容易被忽略的点：li:nth-child(2n+1) 和 :nth-child(2n+1) 在父元素只有 <li> 时效果一样，但一旦混入其他标签，前者可能完全失效。
立即学习“前端免费学习笔记（深入）”；
- 不要写
ul li:nth-child(odd)以为能选中奇数位的<li>—— 它实际选中的是「位置为奇数且标签为li」的元素，但前提是该位置上真是li - 想选中第 n 个
<li>，直接用li:nth-of-type(n)更可靠 - 如果列表由 JS 动态生成，需确认 DOM 插入后是否触发重排；某些框架（如 Vue）的
v-for会插入 comment 节点，干扰:nth-child计数
用 :is() 提升 nth-child 的实用性（现代方案）
:is() 允许你把多个类型合并进一个 :nth-child 判断，适合处理「列表项可能是 <li> 或 <article></article>」这类混合结构。
示例：一个菜单栏包含 <li> 和 <button></button>，想给第 2、4、6 个可交互项加边框：
nav :is(li, button):nth-child(2n) {
border: 1px solid #ccc;
}这比写两遍选择器更简洁，也避免了因节点类型不同导致的漏选。
-
:is()不提升优先级，:is(li, button):nth-child(2)和li:nth-child(2)权重一致 - 兼容性注意：Chrome 88+/Firefox 90+/Safari 15.4+ 支持；旧项目需用 PostCSS 插件自动展开
- 不能在
:is()里嵌套伪类如:hover，但:nth-child可以正常用
调试 nth-child 匹配失败的三步检查法
当样式没生效，别急着改选择器，先确认结构本身是否符合预期。
- 打开 DevTools → 选中父容器 → 在「Computed」面板查
display是否为flex或grid：这两种布局下:nth-child仍按 DOM 顺序工作，但视觉顺序可能被order打乱，造成错觉 - 执行
$0.children（在 Console 中选中父元素后运行），看返回的 HTMLCollection 里子节点的真实类型和顺序 - 临时加一句
* { outline: 1px solid red; }，观察哪些节点被计入「child」——常会发现看不见的文本节点或注释节点占了位置
最常被忽略的是：CSS 选择器无法跨 Shadow DOM 边界，如果列表在自定义组件内部（比如 <my-list></my-list>），外部样式表里的 li:nth-child(2) 根本不起作用，必须在组件内定义或使用 ::slotted()。
