用 li:nth-child(3) 可选中父元素下第3个子元素且为li的元素，但若前有其他标签则可能不匹配；精准选第3个li应改用 li:nth-of-type(3)。
怎么用 :nth-child() 选中第 3 个 li？
直接写 li:nth-child(3) 就行，但要注意：它匹配的是父元素下「第 3 个子元素且是 li」，不是「第 3 个 li」。如果前面有其他标签（比如 div 或文本节点），序号会跳过那些非 li 元素重新计算。
常见错误现象：ul 里第一个是 div，后面跟 5 个 li，此时 li:nth-child(3) 实际匹配不到任何 li —— 因为第 3 个子元素是那个 div 后面的第 1 个 li，它其实是第 4 个子元素。
- 想精准选中「第 n 个
li」，改用li:nth-of-type(n) -
:nth-child(3)适合结构固定、子元素类型一致的场景（如纯li列表） - 数字支持表达式，比如
:nth-child(2n)选偶数位，:nth-child(3n+1)选第 1、4、7… 个
:nth-child(odd) 和 :nth-child(even) 真的按奇偶编号吗？
是的，但编号依据仍是「在父元素中的位置」，不是「当前元素类型内的顺序」。比如父元素有 h2、p、li、li、span，那么两个 li 分别是第 3 和第 4 个子元素，li:nth-child(odd) 只会命中第 3
li），第二个 li 是第 4 个，属于 even，也会被 li:nth-child(even) 命中。
-
odd等价于2n+1，even等价于2n - 它们对空格、注释、文本节点都敏感 —— 任何真实存在的子节点都会占位
- 若需隔行变色且列表混有其他标签，优先考虑
:nth-of-type()或 JS 动态加 class
为什么 :nth-child(2) 没生效？检查这三点
失效通常不是语法错，而是 DOM 结构或 CSS 优先级问题：
- 父容器里第 2 个子元素根本不是目标标签（比如是
script标签或换行符生成的文本节点） - CSS 规则被更具体的样式覆盖，比如同时写了
li.active:nth-child(2)和li:nth-child(2)，前者优先级更高 - 用了伪元素或动态插入内容（如 Vue/React 渲染后），DOM 节点顺序和初始 HTML 不一致
调试建议：打开浏览器开发者工具，选中目标元素，看「Computed」面板里 :nth-child() 对应的规则是否被划掉；再点「Styles」看该规则是否出现在生效列表中。
替代方案：什么时候不该用 :nth-child()？
当结构不可控、需要语义化定位、或要兼容老版本 IE（:nth-child 不支持 IE8 及以下）时，就该换思路：
- 服务端渲染或构建时能预知序号 → 直接输出带
data-index="3"的元素，用[data-index="3"]选择 - JS 控制强的场景 → 用
document.querySelectorAll('li')[2].classList.add('special')更直观 - 需要兼容 IE8 → 用
.first、.last、.odd等手动加的 class 替代
真正容易被忽略的是：CSS 选择器永远基于 DOM 树的物理位置，而不是你“以为”的逻辑顺序。哪怕 HTML 看起来干净，换行和缩进也可能引入文本节点，悄悄改变 :nth-child() 的计算结果。
