:nth-child(2n+1) 选不到预期奇数行是因为它按父元素所有子元素计数，受 thead、tfoot 等干扰；正确做法是限定作用域为 tbody tr:nth-child(2n+1)，或改用 tbody tr:nth-of-type(2n+1) 避开非 tr 元素。
为什么 :nth-child(2n+1) 有时选不到预期的奇数行？
直接写 tr:nth-child(2n+1) 看似合理，但表格里常混有 thead、tbody 或其他非 tr 元素（比如注释、空格文本节点在某些解析下也会计入），导致序号错位。例如：一个 thead 里有 1 行，那第一个 tbody tr 实际是整个表格的第 2 个子元素，:nth-child(2n+1) 就会跳过它。
真正起作用的是限定作用域：用 tbody tr:nth-child(2n+1)
绝大多数表格样式只希望作用于数据行，而数据行几乎总在 tbody 内。加这一层限定后，浏览器只在 tbody 的直接子元素中计数，tr 的序号回归“视觉上的第 1、3、5 行”。
- ✅ 正确写法：
tbody tr:nth-child(2n+1) { background: #f9f9f9; } - ❌ 错误写法：
table tr:nth-child(2n+1)（受thead、tfoot干扰） - ⚠️ 注意：
tbody标签即使没显式写出，浏览器也会自动补全，所以该选择器仍有效
2n+1 和 odd 本质一样，但写法影响可读性与维护
:nth-child(odd) 是 :nth-child(2n+1) 的语义等价简写，两者行为完全一致。但区别在于：
- 如果你团队习惯用数学表达式（比如后续要改成
2n+2选偶数），保留2n+1更连贯 - 如果追求快速识别意图，
odd更直观，且少打几个字符 - 二者兼容性无差异（IE9+ 均支持）
更稳妥的替代方案：用 :nth-of-type() 避开非 tr 元素干扰
当表格结构复杂（比如 tbody 内混有 div 或自定义标签），:nth-child() 仍可能失效。此时改用 :nth-of-type()，它只对同类型（即 tr）元素计数：
立即学习“前端免费学习笔记（深入）”；
tbody tr:nth-of-type(2n+1) { background: #f9f9f9; }
不过要注意：:nth-of-type 不支持 odd/even 关键字，只能用 2n+1 这类公式。
真正容易被忽略的是：隔行变色是否需要考虑 tr 被 display: none 或 visibility: hidden 影响——:nth-child 和 :nth-of-type 都**不跳过隐藏元素**，它们按 DOM 位置计数，不是按渲染后可见行计数。
