最可靠纯css方案是tbody tr:nth-child(even)配合tbody tr:nth-child(odd)，需确保tr严格置于tbody内以避免thead干扰，现代浏览器ie9+全支持，无需js或额外class。
用 tr:nth-child(even) 实现表格隔行变色最可靠
纯 CSS 方案是当前最主流、兼容性最好、也最轻量的做法，不需要 JavaScript 或额外 class。现代浏览器（包括 IE9+）都支持 :nth-child() 伪类，tr:nth-child(even) 选中偶数行，tr:nth-child(odd) 选中奇数行。
注意：必须确保 tr 是 tbody 的直接子元素；如果表格里混用了 thead 或 tfoot，且没显式包裹 tbody，浏览器可能自动补全但行为不一致——建议始终手动写 <tbody>。<ul>
<li>避免写成 <code>tr:nth-of-type(even)：它按标签类型计数，但 tr 在 thead/tbody 中是分开的，会导致头部和主体行序号重置，颜色错乱
class="even" 手动控制：维护成本高，数据动态渲染时容易漏掉或错位rgba(245, 245, 245, 0.7)），比纯黑白色更柔和，也更适配深色模式切换当表格含 colspan 或动态插入行时，:nth-child 仍有效但需留意结构
:nth-child 只看 DOM 树中的位置顺序，跟单元格跨列无关。哪怕某行有 <td colspan="3">，只要它是第 4 个 <code>tr，就匹配 tr:nth-child(4)。这点很稳定。
但真实场景中容易出问题的是 JS 动态操作：
- 用
innerHTML += '<tr>...</tr>'拼接新行 → 会触发整个 tbody 重渲染，:nth-child重新计算，通常没问题 - 用
insertRow()或appendChild(tr)插入 → 新tr正确进入 DOM 末尾，序号自然延续，:nth-child依然生效 - 陷阱：如果先删了中间某行，再插入新行到开头，但没触发样式重绘（比如只改
display），视觉上可能“卡”在旧状态 —— 此时可对tbody触发一次offsetHeight读取强制重排
IE8 及更老浏览器必须降级用 class 控制交替色
IE8 不支持 :nth-child()，必须靠 JS 或服务端为每行添加 class="odd"/class="even"。如果项目还需兼容 IE8，CSS 里就得同时写两套规则：
tr.odd { background: #fff; }
tr.even { background: #f9f9f9; }
/* 现代浏览器覆盖 */
tr:nth-child(odd) { background: #fff !important; }
tr:nth-child(even) { background: #f9f9f9 !important; }
这样即使 JS 失败，基础 class 也能兜底；而现代浏览器优先走 :nth-child，避免 class 冗余。
- 服务端渲染时，在循环中用
$i % 2 === 0判断并输出对应 class，最稳妥 - 客户端 JS 初始化时，遍历
tbody.querySelectorAll('tr')，按索引设 class，别漏掉thead里的tr（它们不该参与交替） - 别用
document.write注入样式 —— 它会阻塞解析，且在 DOM 加载完成后调用直接清空页面
表格交替色影响可访问性，别只依赖颜色区分
单纯靠背景色差异不足以满足 WCAG 2.1 AA 标准。色觉障碍用户可能无法分辨浅灰和白的差别，尤其在低亮度屏幕下。
- 务必搭配其他视觉线索：比如在偶数行加 1px 上边框（
border-top: 1px solid #eee），或微调字体粗细（font-weight: 400vs500） - 避免用红/绿作为交替主色 —— 这是最常见的色盲混淆组合
- 用浏览器 DevTools 的「Rendering」面板开启「Emulate vision deficiencies」，实时检查效果
- 如果表格允许排序或筛选，交替色逻辑必须随 DOM 重排实时更新，否则行序和颜色会脱节
实际效果是否稳定，取决于你有没有把 tr 严格放在 tbody 里，以及是否考虑了辅助技术用户的感知路径。这两点，比选哪个 CSS 选择器更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
