tr:nth-child(2n)在表格中常失效，因的tr也参与计数；应改用tbody tr:nth-of-type(2n)或显式添加并配合css变量统一管理交替色，ie8需js降级。
nth-child(2n) 为什么有时不生效
直接写 tr:nth-child(2n) 在表格里经常失效，不是选择器写错了，而是 HTML 结构干扰了计数。比如 <thead> 里的 <code><tr> 也会被算进 <code>:nth-child() 的序列——第 1 行是 <thead><tr>，第 2 行才是 <code><tbody><tr>，结果所有 <code><tbody><tr> 都变成奇数位，全不匹配。
<p>解决办法是限定作用范围：</p>
<ul><li>给 <code><tbody> 单独加类（如 <code>class="data-body"），再写 .data-body tr:nth-child(2n)
tbody tr:nth-of-type(2n) —— :nth-of-type 只数同标签名的兄弟元素，不受 <thead> 干扰
<li>避免用 <code>tr:nth-child(even)，语义等价但可读性差，且容易和 odd 混淆逻辑起点用 CSS 变量控制交替色更灵活
硬编码颜色值会让维护变麻烦，比如换主题时要改多处。用 CSS 变量可以把颜色抽出来统一管理：
:root {
--row-even-bg: #f9f9f9;
--row-odd-bg: #ffffff;
}
tbody tr:nth-of-type(odd) {
background-color: var(--row-odd-bg);
}
tbody tr:nth-of-type(even) {
background-color: var(--row-even-bg);
}
这样只需改 :root 里的变量，整站表格风格就同步更新。如果某张表需要特殊配色，直接在表格容器上覆盖变量：
.sales-table {
--row-even-bg: #f0f8ff;
--row-odd-bg: #e6f7ff;
}
IE 兼容性要注意什么
:nth-of-type 在 IE9+ 支持，:nth-child 也是 IE9+，但 IE8 及以下完全不支持。如果必须兼容 IE8：
- 放弃纯 CSS 方案，改用 JS 动态加 class（如
class="row-even"） - 或者用
tr:first-child+tr:first-child + tr这类组合模拟，但只能写死前几行，不可扩展 -
:nth-of-type比:nth-child在老浏览器中行为更稳定，推荐优先用前者
另外，CSS 变量（var(--x)）IE 完全不支持，所以 IE 场景下变量方案得降级为预处理器变量（如 Sass $even-bg）或内联 style。
tbody 缺失时的隐性坑
很多手写的 HTML 表格会省略 <tbody>，浏览器虽会自动补上，但 DOM 中的结构层级可能影响选择器匹配。例如：
<pre class="brush:php;toolbar:false;"></pre>
<table>
<tr><th>Name</th></tr>
<tr><td>Alice</td></tr>
</table>
<p>此时所有 <code><tr> 是 <code><table> 的直接子元素，<code>tr:nth-of-type(2n) 会把第 2、4、6… 行标为偶数——但第 1 行是表头，不该参与交替。正确做法是显式写出 <tbody>，并只对其中的 <code>tr 应用样式：
- 始终手动包裹数据行：
<tbody><tr>...</tr></tbody> - 表头统一放
<thead>，避免用 <code><tr><th> 混在数据流里 <li>用 <code>tbody tr代替泛泛的tr，提高选择器意图清晰度
没写 <tbody> 的老代码，用 <code>:nth-of-type 很可能把表头也染上背景色，这种 bug 不报错，但视觉上很突兀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
