:nth-child选不到元素是因为它按父元素下所有子元素的顺序计数，而非同类型元素；常见干扰包括换行符、注释等隐藏节点，可用:nth-of-type或清理DOM结构解决。
为什么 :nth-child 选不到你想要的元素？
因为 :nth-child 数的是「父元素下的第几个子元素」，不是「第几个同类型元素」。如果你的列表项中间夹着 <div>、<p> 或注释节点，序号就会错位——哪怕 DOM 看起来是干净的 <li> 列表，也可能被隐藏的文本节点（比如换行符）干扰。
- 检查父容器内是否只有目标元素：用浏览器开发者工具选中父元素，看「Elements」面板里子节点的实际结构
- 用
:nth-of-type替代（如果目标是同标签名元素，如全是<li>） - 若必须用
:nth-child，先确保目标元素是父容器下连续、无干扰的第 N 个子节点
:nth-child(2n) 和 :nth-child(2n+1) 的真实行为
它们匹配的是「位置序号满足公式」的元素，不是「偶数/奇数索引」——CSS 序号从 1 开始，所以 2n 是第 2、4、6…个子元素，2n+1 是第 1、3、5…个。容易误以为 2n 是「偶数索引」，但 JS 里数组索引从 0 开始，这里不适用。
-
:nth-child(2n)等价于:nth-child(even)，但别写成:nth-child(2n+0)（无效） -
:nth-child(-n+3)匹配前 3 个子元素（n=0→3, n=1→2, n=2→1，n≥3 结果≤0，停止） - 负系数如
:nth-child(-2n+5)可用于倒序截取，但可读性差，建议搭配注释说明
用 :nth-child(3) 选第三个 <li> 却失效的常见原因
最常踩的坑是：父元素里第一个子节点其实是空白文本节点（HTML 换行缩进导致），那么第一个 <li> 实际是第 2 个子节点，:nth-child(3) 就指向第二个 <li>，而非你数的「第三个」。
- 在 HTML 中删掉
<ul>和第一个<li>之间的换行和空格，或用<ul><li>...紧凑写法 - 用
ul > li:nth-of-type(3)更可靠（只数<li>标签，忽略其他节点） - 调试时临时加
* { outline: 1px solid red; }，观察实际子元素边界和顺序
当需要跳过前 N 项再选时，别硬套公式
:nth-child(n+4) 表示「从第 4 个子元素开始往后所有」，不是「第 4 个」；要选「第 4 个及之后每 3 个」得写 :nth-child(3n+4)。公式里的常数项决定起点，系数决定步长。
立即学习“前端免费学习笔记（深入）”；
-
:nth-child(3n+1)→ 第 1、4、7、10…个子元素 -
:nth-child(3n+2)→ 第 2、5、8、11…个子元素 - 想选「第 5、8、11…」？直接写
:nth-child(3n+5)，别试图用n+2之类绕弯 - 复杂逻辑建议拆解：先用类名标记关键项，再用 CSS 选择，比死磕公式更可控
真正难的不是写出公式，而是确认你数的「第几个」对应的是 DOM 树里的第几个子节点——打开开发者工具，把鼠标悬停在元素上，看它在父节点子列表中的真实序号，比背公式管用得多。
