:nth-child选不到元素是因为它按父元素所有子元素（含文本、注释节点）的物理位置计数，而非同类元素序号；如li:nth-child(2)要求第2个子元素必须是li，否则失效，此时应改用li:nth-of-type(2)。
为什么 :nth-child 选不到你想要的元素？
因为 :nth-child 数的是父元素下的**所有子元素位置**，不是“第几个同类元素”。比如一个 <ul></ul> 里混着 <li> 和 <p></p>，li:nth-child(2) 只会匹配“排在第 2 位且是 <li>”的元素——如果第 2 个子元素是 <p></p>，那它就什么也选不到。
常见错误现象：li:nth-child(2) 没生效、明明是第 2 个 <li> 却没被样式命中。
- 检查父容器下是否只有
<li>元素；如果有其他标签（如注释、文本节点、<div>），它们都参与计数<li>想按 <code><li>的顺序选，改用li:nth-of-type(2)更可靠 -
:nth-child的参数支持数字、odd/even、an+b（如2n+1表示奇数位） -
:nth-child(3n)匹配第 3、6、9… 项（n=1→3，n=2→6，n=0→0无效） - 别写成
:nth-child(n*3)或:nth-child(3*n)—— 浏览器不识别，会直接忽略整条规则 - 负数
n不被支持（n=-1算出的-2无意义） - 用浏览器开发者工具「Elements」面板看真实 DOM 结构，确认目标元素的物理位置序号
- 避免依赖
:nth-child做关键逻辑（如 JS 通过document.querySelector('li:nth-child(2)')取值），结构微调就失效 - 更稳妥的方式：给需要操作的项加唯一
data-*属性，或用ref/key直接定位 - 如果必须兼容 IE8，用 class 代替：
<li class="first">、<li class="third"> - 现代项目基本可忽略 IE8，但要注意某些企业内网环境仍存在；上线前查 Can I Use 数据，别只信“IE9+”这个说法——实际测试比文档更可靠
- PostCSS 的
postcss-preset-env不会为:nth-child添加 polyfill，它只是语法转换，不能补功能
:nth-child(3n) 和 :nth-child(3n+1) 到底怎么算？
公式 an+b 中，n 从 0 开始代入非负整数（0,1,2,3...），结果就是匹配的序号。注意：结果必须 ≥ 1 才有效。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
举例：:nth-child(3n+1) → 当 n=0 得 1，n=1 得 4，n=2 得 7……所以匹配第 1、4、7、10… 个子元素。
在 React/Vue 中动态列表里用 :nth-child 要当心什么？
框架生成的 DOM 常含额外节点：React 的 Fragment 不渲染，但 > 里若夹杂空格或换行，可能产生文本节点；Vue 的 v-for 若带 v-if 或插槽内容，会导致子元素顺序和预期不符。
IE 下 :nth-child 不生效怎么办？
IE9+ 支持 :nth-child，但 IE8 及更早版本完全不支持，且不支持任何伪类参数（连 :nth-child(1) 都不行）。
真正麻烦的不是语法写不对，而是你以为它在数“第几个 li”，其实它在数“第几个孩子”。DOM 结构稍有变化，序号就偏了——这点最容易被忽略。
