结论：用 tbody > tr:nth-child(odd/even) 能可靠实现表格隔行变色，前提是确保 tr 严格位于 tbody 内且无干扰子元素；:nth-child 按父元素下所有子元素位置计数，非视觉行号，混入非 tr 标签或缺失 tbody 会导致错乱。
直接说结论：用 :nth-child(odd) 和 :nth-child(even) 确实能快速实现表格行交替背景色，但前提是 HTML 结构干净——<tr> 必须是其父元素（<code><tbody> 或 <code><table>）的连续、无干扰子元素；否则奇偶计数会错乱，颜色就“跳着染”。
<h3>为什么 <code>:nth-child(odd) 有时不按行号算？
因为 :nth-child() 数的是“在父元素下的所有子元素中的位置”，不是“第几行”。如果表格里混了 <tr class="header">、空 <code><tr>、或被 JS 动态插入的 <code><tr>，甚至 <code><tbody> 缺失导致 <code><tr> 直接挂在 <code><table> 下（而 <code><caption></caption>、<colgroup></colgroup> 也在里面），计数就全偏了。
- ✅ 正确结构：确保每组数据行都在独立的
<tbody> 内，且里面只有 <code><tr><li>❌ 常见陷阱：用 <code><tr> 包裹分组标题（如 <code><tr class="group-title">），它也会被计入 <code>:nth-child序号 - ? 替代方案：改用
:nth-of-type()—— 它只数同类型标签（即只数<tr>），对中间穿插的 <code><div> 或注释不敏感，但依然会被同类非 <code><tr> 标签（如 <code><tr hidden>）影响 <h3>真正可靠的写法：用 <code><tbody> 隔离 + <code>:nth-child把数据行严格限定在
<tbody> 中，再对 <code><tbody> > tr 应用样式，就能让序号从 1 开始干净计数。 <pre class="brush:php;toolbar:false;">tbody > tr:nth-child(odd) { background-color: #f9f9f9; } tbody > tr:nth-child(even) { background-color: #ffffff; }</pre> <ul><li>必须写 <code>tbody > tr，不能只写tr:nth-child(odd)—— 否则样式可能穿透到<thead> 或其他 <code><tbody><li>如果表格有多个 <code><tbody>（比如分页加载），每组都会独立从 odd/even 开始，符合预期 <li>IE8 不支持 <code>:nth-child，若需兼容，得用 JS 手动加 class 或退回到服务器端渲染 class - ⚠️ 但要注意：如果用
rowspan的行后面紧跟一个display: none的<tr>，那个隐藏行仍参与计数，导致后续可见行奇偶错位 <li>✅ 解决办法：隐藏行改用 <code>visibility: collapse（对表格行有效），或干脆从 DOM 移除，别留空壳 - 不要试图用
:nth-child(2n+1)模拟“视觉奇数行”——CSS 没法读取渲染后布局信息
遇到合并单元格（rowspan）怎么办？
:nth-child 对 rowspan 无感——它只看 HTML 树位置，不看渲染后视觉行高。所以即使某行占了两行高度，下一行的序号仍按 DOM 顺序走，背景色不会“跨行延续”。这反而是优点：视觉节奏由 DOM 结构决定，稳定可预测。
最易被忽略的一点：伪类生效依赖于元素真实存在于 DOM 中。动态渲染的表格（比如 React/Vue 列表），要确认 <tr> 节点挂载完成后再检查样式；服务端渲染时，确保 HTML 输出中 <code><tbody> 存在且结构闭合。否则看着代码没错，页面就是不染色——八成是结构没对上。</tbody>
