应使用tbody tr:nth-of-type(odd)而非tr:nth-child(odd)，因后者会将thead中的tr计入序号导致错位；nth-of-type仅统计tr元素，更鲁棒；推荐半透明灰背景并抽为CSS变量适配暗色模式，IE8需JS或服务端加class兼容。
直接用 tbody tr:nth-of-type(odd) 加背景色，别用 tr:nth-child(odd) —— 后者在有 thead 时必错位。
为什么 tr:nth-child(odd) 在表格里经常失效
浏览器会自动补全 tbody 标签，但 DOM 结构里它真实存在；tr:nth-child(odd) 是按「所有兄弟节点顺序」数的，thead 里的 tr 会被算进去。比如表头占 1 行，那第一行数据就变成第 2 个 tr，被当成偶数行，整条斑马纹偏移一格。
常见翻车场景：
- CMS 或框架动态输出的表格（默认带
thead） - 手写 HTML 没显式写
tbody，但用了tr:nth-child - 后续加了
tfoot或多行表头，样式突然全乱
正确做法：强制写 tbody tr:nth-of-type(odd) —— 它只统计 tr 元素本身，跳过 thead、tfoot 里的干扰节点，更鲁棒。
立即学习“前端免费学习笔记（深入）”；
颜色别用纯白/纯黑，优先选半透明灰
纯 #ffffff 和 #000000 对比太硬，尤其配细边框或深色文字时容易视觉疲劳；hover 或选中状态也难平滑过渡。
推荐写法：
background-color: rgba(245, 245, 245, 0.8);background-color: hsl(0, 0%, 97%);- 抽成 CSS 变量：
--zebra-odd: rgba(245, 245, 245, 0.8);，方便暗色模式切换
禁用内联样式设背景（如 <tr style="background:#f0f0f0">），会覆盖伪类，且无法响应主题变化。
<h3>IE8 及更老浏览器怎么兼容</h3>
<p><code>:nth-child 和 :nth-of-type 在 IE8 完全不支持，连 :first-child 都不稳定。
这时候没有纯 CSS 解法，只能：
- 服务端渲染时给奇偶行加 class（如
class="odd"/class="even"） - 前端 JS 动态遍历
tbody tr，按索引加 class - 放弃伪类，改用 background-image 模拟（不推荐：行高稍变就错位，flex/grid 下失效）
注意：如果项目明确不支持 IE8，就别加 JS 兜底，省得维护负担。
最易被忽略的一点：哪怕 HTML 源码里没写 tbody，CSS 里也必须显式写 tbody tr:nth-of-type(odd) —— 这是规则，不是可选项。
