tr:nth-child(even)不生效主因是thead/tfoot干扰计数，应限定为tbody tr:nth-child(even)；nth-child(even)与2n等价，但按DOM位置而非逻辑行序匹配。
为什么 tr:nth-child(even) 有时不生效？
直接写 tr:nth-child(even) 却没变色，大概率是因为表格里混入了 thead、tbody 或 tfoot —— :nth-child 是按 DOM 树中的实际子元素位置计数的，不是按 tr 的逻辑顺序。比如 thead > tr 占了前两行，那第一个 tbody > tr 就是第 3 个子元素，even 规则自然跳过它。
实操建议：
- 显式限定作用范围：
tbody tr:nth-child(odd)和tbody tr:nth-child(even) - 如果用
table没包tbody，浏览器会自动补，但补的位置不可控，务必手动写上tbody - 避免在
tr上写display: block等破坏表格渲染模型的样式，否则:nth-child计数可能异常
nth-child(2n) 和 nth-child(even) 有区别吗？
没有行为区别，even 就是 2n 的别名，两者完全等价。但要注意：它们匹配的是「第 2、4、6… 个子元素」，不是「第 2、第 4 行数据」——这点和 nth-of-type 不同，后者只算同类型元素（即只算 tr），而 nth-child 会把 th、td、注释、文本节点全算进去（虽然表格里一般没有后两者）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 给
table tr写nth-child(odd)，结果第一行（thead里的tr）被染色，因为它是table的第一个子元素 - 在
tbody里插了一个tr class="summary"作汇总行，它也会参与计数，导致后续行颜色错位
兼容性与更稳妥的替代方案
:nth-child 在 IE9+ 完全支持，移动端也无压力。但如果要兼容 IE8 或服务端渲染时需降级，可考虑 JS 动态加类：
document.querySelectorAll('tbody tr').forEach((tr, i) => {
tr.classList.toggle('odd', i % 2 === 0);
});
不过纯 CSS 方案仍是首选，关键是写对作用域。另一个容易被忽略的点是：CSS 优先级。如果你的表格框架（如 Ant Design、Element UI）已定义了 tr:hover 或内联 style，交替色可能被覆盖，此时加 !important 不是好办法，应提高选择器 specificity，比如用 table.my-table tbody tr:nth-child(even)。
要不要用 nth-of-type 替代？
可以，但没必要。在标准表格结构中，tr 是 tbody 的唯一直接子元素类型，tbody tr:nth-of-type(odd) 和 tbody tr:nth-child(odd) 效果一致。唯一优势是：当 tbody 里混入非 tr 元素（比如用 div 做加载占位符）时，nth-of-type 不受干扰。但这种结构本身就不规范，修复 HTML 比换伪类更治本。
真正该警惕的是：用 tr:nth-child(odd) 同时又给某些 tr 加了 class="disabled" 却忘了在 CSS 里排除它——颜色会照常应用，视觉上就出错了。
