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> 里的 <code><tr> 算作第 1 行，导致第一行数据被当成偶数行染色。哪怕 HTML 源码没写 <code><tbody>，DOM 中它也存在，CSS 选择器必须按实际结构匹配。
<p>正确做法是强制限定在 <code><tbody> 内部计数：
<ul><li>
<code>tbody tr:nth-child(odd)：按父元素所有子节点顺序计数（包括注释、文本节点等），最常用但需确保 <tbody> 存在且无干扰节点
<li>
<code>tbody tr:nth-of-type(odd)：只统计 <tr> 标签，跳过 <code><thead> 或 <code><script></script> 等兄弟节点，更鲁棒，推荐优先用
table tr:nth-child(odd)——<thead> 和 <code><tbody> 是 table 的并列子元素，<code>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"> / <code><tr class="even"> <li>前端 JS 动态补 class：<code>Array.from(document.querySelectorAll('tbody tr')).forEach((tr, i) => tr.classList.toggle('odd', i % 2 === 0)); - 避免用内联样式（如
<tr style="background:#f0f0f0">）——会覆盖后续 CSS，且无法响应主题切换 <h3>border-collapse: collapse 不是可选项</h3> <p>没加 <code>border-collapse: collapse时，<td> 边框默认分离，上下行之间留空隙，斑马纹会被“打断”，看起来像断开的色块，不是连续条纹。 <p>同时注意：</p> <ul><li>该声明必须作用于 <code><table> 元素，不是 <code><tr> 或 <code><td> <li>如果表格带边框，不设此属性会导致双线边框，视觉臃肿</li> <li>动态插入行后若未重绘，有时需触发重排（如修改 <code>offsetHeight），但多数现代框架已自动处理
真正容易被忽略的点是：斑马纹依赖语义结构。没写
<tbody> 的表格，<code>tbody tr 选择器就失效；JS 动态插入行但没同步加 class，:nth-child 就会因 DOM 变动而重算错乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
