tr:nth-child(even)不生效是因为它按table下所有子元素物理序号计数，thead中的tr会占用第1位，导致tbody首行被误判为even；应改用tbody tr:nth-of-type(even)精准匹配数据行。
tr:nth-child(even) 是最直接有效的方案，但必须注意它选中的是整个表格（含 thead）里的第 2、4、6… 个 tr 元素，不是你肉眼看到的“第二行数据”。
为什么 tr:nth-child(even) 有时没生效或错位
常见错误是把表头 thead 和表体 tbody 混在一起数。比如：
- 表格结构为
<thead><tr></tr></thead> <tbody> <tr></tr> <tr></tr> </tbody>，那么tr:nth-child(2)实际指向的是tbody里第一行——因为thead的tr占了第 1 个位置 - 如果用了
border-collapse: collapse但没配background-clip: padding-box，深色边框可能盖住浅色背景，看起来像“断开” - 给
td单独设了background-color，会覆盖掉tr的背景色（td默认透明，一旦显式设置就完全遮挡父级）
只对 tbody 里的偶数行生效
用 tbody tr:nth-child(even) 或更稳妥的 tbody tr:nth-of-type(even)：
-
nth-child(even)在tbody内计数时仍受其内部其他元素干扰（比如注释、空格文本节点极少影响，但保险起见建议用后者） -
nth-of-type(even)只数tr类型的子元素，无视tbody里可能混入的script或注释，语义更准确 - 示例：
tbody tr:nth-of-type(even) { background-color: #f5f5f5; }
JavaScript 动态加类比纯 CSS 更可控
当需要响应点击、筛选、排序后重绘，或兼容 IE8–IE11 时，CSS 伪类可能不适用：
- 遍历
tbody.rows（不是getElementsByTagName('tr')，避免拿到thead的行） - 用
i % 2 === 0判断偶数索引（数组下标从 0 开始，所以第 0、2、4 行对应视觉上的第 1、3、5 行——若要视觉偶数行，用i % 2 === 1） - 别直接操作
style.backgroundColor，优先用classList.toggle('even-row')配合 CSS 类，方便主题切换和维护
真正容易被忽略的点：border-collapse: collapse 必须作用于 <table> 元素本身，否则即使写了 <code>tr 背景色，也会被分离边框割裂成一块块小方块——这不是颜色没应用，是视觉被破坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
