最稳妥写法是tbody tr:nth-child(odd) { background-color: #f9f9f9; }，因thead中tr会干扰nth-child计数；border-collapse下应将背景色 applied 到td/th而非tr；IE8需JS动态加class；rowspan会导致DOM序与视觉序错位，无纯CSS解。
用 nth-child(odd) 给表格行加背景色最稳妥
绝大多数现代浏览器都支持 nth-child(odd)，它能精准选中表格的奇数行（tr），配合 background-color 就能实现斑马纹。注意：必须作用在 tr 上，而不是 td 或 tbody —— 否则容易被内联样式或单元格边框干扰。
- 写法是
tr:nth-child(odd) { background-color: #f9f9f9; } - 如果表格有表头（
thead），默认thead > tr也会被匹配，建议显式排除：tbody tr:nth-child(odd) - 不要用
nth-of-type，它在有合并单元格（rowspan）时行为不可靠
处理 border-collapse: collapse 下的边框重叠问题
当表格设了 border-collapse: collapse，相邻 tr 的上下边框会合并，导致斑马纹在视觉上“断开”。这不是背景没生效，而是边框盖住了部分背景色。
- 解决方案之一：给
td和th加border-bottom，统一用单元格边框代替行边框 - 更推荐的做法：保留
border-collapse: collapse，但把背景色应用到td和th上，而非tr—— 写成tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #f9f9f9; } - 注意：此时需确保
th没有覆盖背景色的内联样式或更高优先级规则
IE8 及更老浏览器不支持 nth-child 怎么办
IE8 不识别 nth-child，但支持 first-child 和 last-child，可借助 JavaScript 补充 class，或改用 CSS 表达式（不推荐）。实际项目中，若必须兼容 IE8，建议直接放弃纯 CSS 斑马纹，改用 JS 动态加类：
- 简单脚本：
document.querySelectorAll('tbody tr').forEach((tr, i) => i % 2 === 0 && tr.classList.add('striped')); - 然后定义
.striped { background-color: #f9f9f9; } - 纯 CSS fallback 方案极少且维护成本高，不如明确降级为无斑马纹（多数 IE8 场景下用户对视觉差异不敏感）
合并单元格（rowspan）会让 nth-child 错位
nth-child 是按 DOM 顺序计数的，不是按渲染后的视觉行计数。一旦某行有 rowspan="2"，后续行的序号就会偏移，导致斑马纹错行。
立即学习“前端免费学习笔记（深入）”；
- 典型现象：第 3 行本该是浅色，结果变成深色；第 4 行颜色又反了
- 没有纯 CSS 通用解法。要么避免在需要斑马纹的区域使用
rowspan，要么改用 JS 计算真实渲染行号再打 class - 如果只是偶发小范围合并，可手动给受影响的
tr加 class 覆盖，例如：tr.manual-stripe { background-color: #f9f9f9; }
rowspan、一进 IE8、一边框合并，就立刻暴露底层机制和渲染逻辑的差异。真要兼顾所有场景，得先想清楚哪些是“必须支持”，哪些可以协商降级。 
