tbody tr:nth-of-type(odd)最可靠，因只计tr标签、跳过thead等干扰；必须限定tbody作用域，避免thead影响计数；禁用table tr选择器；推荐十六进制或rgba色值，配合CSS变量支持暗色模式；IE8需JS或服务端加class；border-collapse: collapse必设于table元素。
tbody tr:nth-child(odd) 必须显式限定作用域
直接写 tr:nth-child(odd) 几乎总会出错——浏览器把 <thead> 里的 <tr> 算作第 1 行，导致第一行数据被当成偶数行染色。哪怕 HTML 源码没写 <tbody>，DOM 中它也存在，CSS 选择器必须按实际结构匹配。
正确做法是强制限定在 <tbody> 内部计数：
-
tbody tr:nth-child(odd)：按父元素所有子节点顺序计数（包括注释、文本节点等），最常用但需确保<tbody>存在且无干扰节点 -
tbody tr:nth-of-type(odd)：只统计<tr>标签，跳过<thead>或<script>等兄弟节点，更鲁棒，推荐优先用 - 绝对不要写
table tr:nth-child(odd)——<thead>和<tbody>是 table 的并列子元素，table > tr根本不匹配任何行
颜色值别用命名色或纯白/纯黑
命名色如 lightgray 在不同浏览器渲染差异明显；#ffffff 和 #000000 对比过强，尤其配细边框或小字号时易视觉疲劳。
推荐方案：
立即学习“前端免费学习笔记（深入）”；
- 用十六进制或 rgba：例如
#f9f9f9、rgba(245, 245, 245, 0.8) - 深色背景表格要反向设计：浅色行配深字，深色行配浅字，否则文字可读性崩坏
- 若支持暗色模式，抽成 CSS 变量：
--zebra-odd: #f9f9f9;，再用background-color: var(--zebra-odd);
IE8 及更老浏览器只能靠 JS 或服务端加 class
:nth-child() 在 IE8 完全不可用，连 :first-child 都不稳定。这时候伪类方案彻底失效，没有兼容性妥协空间。
可行替代：
- 服务端渲染时直接输出
<tr class="odd">/<tr class="even"> - 前端 JS 动态补 class：
Array.from(document.querySelectorAll('tbody tr')).forEach((tr, i) => tr.classList.toggle('odd', i % 2 === 0)); - 避免用内联样式（如
<tr style="background:#f0f0f0">）——会覆盖后续 CSS，且无法响应主题切换
border-collapse: collapse 不是可选项
没加 border-collapse: collapse 时，<td> 边框默认分离，上下行之间留空隙，斑马纹会被“打断”，看起来像断开的色块，不是连续条纹。
同时注意：
- 该声明必须作用于
<table>元素，不是<tr>或<td> - 如果表格带边框，不设此属性会导致双线边框，视觉臃肿
- 动态插入行后若未重绘，有时需触发重排（如修改
offsetHeight），但多数现代框架已自动处理
<tbody> 的表格，tbody tr 选择器就失效；JS 动态插入行但没同步加 class，:nth-child 就会因 DOM 变动而重算错乱。 
