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