应优先使用 tbody tr:nth-child(odd) 而非 tr:nth-child(odd) 或 nth-child(even)，因 nth-child(odd) 更稳妥地避开表头；斑马纹宜用浅灰（如 #f5f5f5）而非浅蓝，兼顾可读性与色盲友好；border-collapse 下推荐直接为 td/th 设背景色；IE兼容需服务端加类或JS补丁。
nth-child(odd) 和 nth-child(even) 哪个更可靠
直接用 nth-child(odd) 比 nth-child(even) 更稳妥。因为表格首行通常是表头（thead），而 nth-child 是按 DOM 顺序计数的——如果 thead 里有 1 行，那第一行 tbody 的 tr 就是第 2 个子元素，nth-child(odd) 会跳过它；但多数人想要的是“内容行交替”，不是“所有 tr 交替”。
所以真正该做的是：只对 tbody tr 生效。
- 写成
tbody tr:nth-child(odd)，而不是tr:nth-child(odd) - 如果表格没写
tbody，浏览器会自动补上，但显式写出更可控 - 避免用
nth-of-type——它按标签类型算，但如果有tr里嵌了其他tr（比如模板行、动态插入行），容易错位
颜色选浅灰还是浅蓝？别只看美观
斑马纹不是为了好看，是降低横向扫视时的视觉疲劳。深色文字配浅灰背景（比如 #f5f5f5）比配浅蓝（比如 #e6f7ff）更安全：
-
#f5f5f5和纯白背景的对比度约 1.1:1，足够区分又不刺眼；#e6f7ff在某些显示器上和白色几乎看不出差别 - 色盲用户（尤其是蓝黄辨识弱）可能把浅蓝背景看成白色，导致整行“消失”
- 如果必须用彩色，选饱和度低于 10%、明度高于 90% 的中性色，比如
#f8f9fa或#f1f3f5
border-collapse: collapse 下的斑马纹断层问题
当表格设了 border-collapse: collapse，相邻 tr 的边框会合并，这时仅给 tr 设背景色，会在细边框处露出白缝——看起来像条纹“错位”或“变宽”。
立即学习“前端免费学习笔记（深入）”；
解决方法不是加边框，而是让背景色穿透：
- 给
tr加background-clip: padding-box（默认就是这个值，一般不用改） - 确保
td和th没有设置background-color覆盖父级 - 更稳的做法：直接给
td, th设背景色，而不是tr，例如：tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #f8f9fa; }
IE11 及更老浏览器不支持 nth-child 怎么办
IE8 及以下完全不支持 nth-child；IE9–11 支持但对动态插入的行响应滞后。如果必须兼容，有两个现实选择：
- 服务端渲染时就给奇偶行加 class，比如
class="row-odd"和class="row-even"，CSS 写死规则 - 用 JS 简单补丁：遍历
tbody tr，用index % 2 === 0判断后加 class，注意要在数据更新后重跑一次 - 别用
:nth-child(n+1)这类复杂表达式——IE9 不支持参数带符号的写法
现在大多数项目已放弃 IE 兼容，但如果表格要嵌在老旧内网系统里，这点绕不开。
