tr:nth-child(even)不生效主因是dom中tr前存在thead、tbody等兄弟节点，导致序号错位；应统一放入tbody并用tbody tr:nth-child(even)确保按视觉行序变色。
nth-child(even) 为什么有时不生效
常见现象是写了 tr:nth-child(even) 却发现偶数行没变色，甚至全表都没反应。核心原因不是选择器写错了，而是 HTML 结构里 tr 前面混入了其他兄弟节点——比如 thead、tbody 或注释、空格文本节点（虽然浏览器通常忽略纯空白，但某些解析场景下仍可能干扰）。:nth-child() 是按 DOM 树中**同级元素的顺序位置**计算的，不是按 tr 的序号。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标
tr是其父容器下连续、无干扰的子元素；最稳妥做法是把所有tr放进同一个tbody，再对tbody tr:nth-child(even)下样式 - 避免在
table直接写tr:nth-child(even)，因为thead和tbody都是table的直接子元素，第一个tr很可能排第 2 或第 3 位 - 用浏览器开发者工具选中某行，看「Styles」面板里是否命中规则；若未命中，右键「Reveal in Elements Panel」，观察它在父节点下的实际序号
tbody tr:nth-child(even) 和 tbody tr:nth-of-type(even) 的区别
两者都常被用来做隔行变色，但行为完全不同：:nth-child() 看位置，:nth-of-type() 看标签类型。如果 tbody 下只有 tr，效果一样；但一旦插入 tr class="summary" 或 tr[data-role="footer"]，差异就暴露了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
tbody tr:nth-child(even)：严格按视觉行序交替，适合需要“第2、4、6…行固定变色”的报表场景 - 用
tbody tr:nth-of-type(even)：只统计tr标签的数量，跳过其他同级元素（如div或注释），但若tbody里混有th或td（不合法但偶发存在），也会出错 - 现代项目优先选
nth-child，语义更可控；nth-of-type更适合模板动态插入非tr节点的场景，但需额外校验结构
兼容性与性能注意点
:nth-child() 在 IE9+ 完全支持，IE8 及以下不支持。性能上它本身没有明显开销，但若表格极大（比如上千行）且频繁重绘，css 选择器匹配压力会略增。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- IE8 项目必须降级：用 js 动态加
class="even"，或服务端渲染时输出class - 超大表格慎用纯 CSS 隔行色——滚动时重排可能卡顿；可考虑用
background-image: linear-gradient()模拟条纹背景，一劳永逸 - 避免链式写法如
table tbody tr:nth-child(even) td，多一层层级就多一次遍历；直接写tbody tr:nth-child(even)然后设background-color即可
容易被忽略的边框合并问题
当表格设了 border-collapse: collapse，偶数行背景色会被相邻行的边框“切掉”1px，看起来像颜色没铺满。这不是选择器失效，而是边框绘制层叠在了背景之上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
tr加background-clip: padding-box（默认值，一般不用显式写），确保背景不被边框裁剪 - 更可靠的做法是：把背景色设在
td和th上，用tbody tr:nth-child(even) td, tbody tr:nth-child(even) th，彻底绕过tr的边框干扰 - 如果用了
box-shadow或伪元素模拟分隔线，要检查它们是否覆盖了背景色——此时需调整z-index或移除阴影
表格隔行变色看着简单，真正上线时卡住的往往不是语法，而是 DOM 层级意外、IE 兼容断层、或者边框和背景的绘制顺序。动手前先打开开发者工具瞄一眼真实结构，比查文档更快。