:nth-child() 选中的是父元素下按物理顺序排第n位且匹配选择器的子元素，而非仅同类型元素的第n个；如div:nth-child(2)失效，常因第2个子元素非div，此时应改用nth-of-type()。
:nth-child() 不是“选第几个 li”的快捷写法，而是“选父元素下按顺序排第 n 位的子元素，且这个子元素恰好匹配你写的标签名或类名”。理解这点，90% 的误用就消失了。
为什么 div:nth-child(2) 有时不生效？
因为浏览器先数父元素的所有直接子节点（不管是不是 div），再看第 2 个是不是 div。如果不是，整个选择器就失败。
- HTML 是：
<div class="wrap"> <p>文本</p> <span>内容</span><div>目标</div> </div>→ 第 2 个子元素是<span></span>，所以div:nth-child(2)完全不匹配 - 真正生效的是
div:nth-child(3)，因为目标div是父元素的第 3 个子节点 - 如果想“不管前面有什么，只找第 2 个
div”，该用div:nth-of-type(2)，它只数同类型元素
:nth-child(odd) 和 :nth-child(2n+1) 真的一样吗？
语义和结果一致，但底层计算逻辑不同：前者是关键词，后者是公式。多数场景可互换，但注意一个细节：
-
2n+1中的n从 0 开始代入：n=0 → 1，n=1 → 3，n=2 → 5…… -
odd是浏览器内置映射，不依赖公式展开，兼容性略好（IE9+ 都支持） - 性能上无差异，但写
odd更易读、少出错；写2n+1在需要动态生成 CSS（如 Less/Sass 循环）时更灵活
怎么选“前 3 个”或“第 4 到第 8 个”元素？
靠公式里的符号方向：-n 表示倒推，n+ 表示顺延。关键不是背公式，而是记住 n 从 0 开始代入试算。
- 前 3 个：
:nth-child(-n+3)→ n=0→3，n=1→2，n=2→1，n=3→0（无效），所以只匹配位置 1/2/3 - 第 4 到第 8 个：
:nth-child(n+4):nth-child(-n+8)，两个条件叠加，缺一不可 - 注意：不能写成
:nth-child(4..8)或:nth-child(4-8)，CSS 不支持区间语法
表格里用 tbody tr:nth-child(even) 为什么还是错行？
常见于表头 thead 里有多个 tr，或 tbody 前混入了注释、空格文本节点（虽然肉眼不可见，但 DOM 中算子元素）。
- 最稳做法：显式限定作用域，写成
tbody > tr:nth-child(even)（加>确保只选直接子tr） - 更推荐用
tbody tr:nth-of-type(even)，它自动忽略thead、tfoot和非tr节点 - 如果表格由 JS 动态渲染，务必等 DOM 插入完成后再应用样式，否则可能因节点未就位导致序号错乱
真正难的不是记公式，而是每次写 :nth-child() 前，心里默数一遍父元素下所有直接子节点的顺序——哪怕只是 <!-- 注释 --> 或换行符产生的空白文本节点，都参与计数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
