应使用 .data-table tbody tr:nth-child(2n) 实现隔行变色，因 :nth-child 按 table 所有子元素计数，受 thead、colgroup 等干扰；2n 兼容性优于 even，且需限定在 tbody 内确保准确匹配。
table tr:nth-child(odd) 和 nth-child(even) 怎么写才生效
直接给 tr 加 :nth-child(odd) 有时没反应，不是语法错，而是 HTML 结构干扰了伪类计算。比如 thead 和 tbody 的存在会让 :nth-child 从整个 table 子元素序列里数，而不是只数 tr。实际中更稳妥的做法是限定作用域：
- 给表格加 class，比如
<table class="data-table"> - 用
.data-table tbody tr:nth-child(odd)显式指定只作用于tbody内的tr - 避免写成
table tr:nth-child(odd)—— 它会把thead tr、tfoot tr全算进去，导致第一行（表头）被误染色
为什么 nth-child(2n) 比 nth-child(even) 更推荐
:nth-child(even) 语义清晰，但部分老旧浏览器（如 IE8 及更早）根本不支持 even/odd 关键字，而 2n 和 2n+1 是 CSS3 标准写法，兼容性更好。如果你的项目还需兼容 IE9 以下环境，必须用数字公式。
-
tr:nth-child(2n)→ 偶数行（第 2、4、6… 行） -
tr:nth-child(2n+1)→ 奇数行（第 1、3、5… 行） - 注意：这里的“第 n 行”始终按 DOM 顺序从 1 开始计数，和是否在
tbody里无关 —— 所以仍需配合tbody tr使用
遇到 colgroup 或空行时 nth-child 还准不准
只要 colgroup、caption 或注释节点出现在 table 直接子级，就会影响 :nth-child 的索引。例如：
<table> <colgroup></colgroup> <tr><td>A</td></tr> <tr><td>B</td></tr> </table>
此时第一个 tr 是第 2 个子元素，tr:nth-child(1) 匹配不到它。解决方法只有两个：
立即学习“前端免费学习笔记（深入）”；
- 删掉干扰的非
tr子元素（如把colgroup移到tr外部或不用） - 改用 JavaScript 动态加 class，比如遍历
tbody.querySelectorAll('tr')后给奇偶索引分别设class="odd"/class="even"
用 nth-of-type 替代 nth-child 能绕过干扰吗
可以，但不推荐。因为 :nth-of-type 是按标签名匹配的，tr:nth-of-type(odd) 确实能跳过 colgroup、caption，但它仍然无法区分 thead tr 和 tbody tr —— 如果你有表头，第一行（thead tr）就会被当成 odd 行染色。而且 :nth-of-type 在 IE8 中也不支持。真正干净的解法，还是老老实实用 tbody tr:nth-child(odd) 并确保结构干净。
复杂点在于：隔行变色看着简单，但一旦表格结构带 thead、colgroup 或服务端渲染出空 tr，:nth-child 就容易失焦。别迷信“一行 CSS 解决”，先 inspect 元素看真实 DOM 层级，再决定 selector 写法。
