必须显式使用 tbody tr:nth-child(odd) 或 tbody tr:nth-of-type(odd)，因浏览器自动补 tbody 但选择器按实际 dom 计算；thead 存在时 tr:nth-child(odd) 会错位；推荐 nth-of-type 更鲁棒，配合半透明灰背景、css 变量适配暗色模式，ie8 等旧浏览器需 js 或服务端加 class，复杂 rowspan 场景应换用 js 控制或重构布局。
tbody tr:nth-child(odd) 必须显式写 tbody
不写 tbody 标签，浏览器会自动补上，但 CSS 选择器计算时仍按 DOM 实际结构走。如果表格有 thead，tr:nth-child(odd) 会把 thead 的行算进去——结果第一行数据变成偶数位，斑马纹直接错一格。
常见错误写法：tr:nth-child(odd) 或 table tr:nth-child(odd)，尤其在动态渲染或 CMS 输出的表格里极易翻车。
- 正确写法必须是
tbody tr:nth-child(odd)或tbody tr:nth-of-type(odd) -
nth-of-type更鲁棒：它只统计tr元素，跳过thead、tfoot里的干扰节点 - 哪怕 HTML 里没写
tbody，CSS 里也得这么写——这是规则，不是可选项
颜色别用纯白/纯黑，优先选半透明灰
纯 #fff 和 #000 对比太强，尤其配深色文字或细边框时容易视觉疲劳；纯色背景在高亮 :hover 或选中状态时也难过渡。
推荐用带 alpha 的浅灰：rgba(245, 245, 245, 0.8) 或 hsl(0, 0%, 97%)，既保持轻量感，又留出足够对比度。
- 避免用
background-image模拟斑马纹——维护成本高、行高稍变就错位、flex/grid 下失效 - 禁用内联样式设背景色（如
<tr style="background:#f0f0f0">），会覆盖 CSS 伪类，且无法响应主题切换 <li>若需适配暗色模式，抽成 CSS 变量：<code>--zebra-odd: #f9f9f9;，再用tbody tr:nth-child(odd) { background-color: var(--zebra-odd); } - 前端脚本示例：
document.querySelectorAll('tbody tr').forEach((tr, i) => tr.classList.toggle('odd', i % 2 === 0)); - 服务端更稳妥：模板循环时根据索引输出
class="row-odd"或class="row-even" - 别用 jQuery 的
:even/:odd——IE8 下行为不一致，且依赖 jQuery 版本，已属淘汰路径 - JS 方案要遍历所有
tr，按实际渲染高度累加，再分组打 class - 简单表格别为兼容 rowspan 过早引入 JS——先确认是否真有跨行单元格
- 若只是偶尔出现，建议改用 CSS Grid 或拆分表格，比硬套斑马纹更可靠
IE8 及更老浏览器只能靠 JS 或服务端加 class
:nth-child 在 IE8 完全不可用，连 :first-child 都不稳定。这时候纯 CSS 无解，硬扛兼容性就得放弃伪类。
轻量级方案是运行时打 class，而不是引入 jQuery 或完整 UI 库。
复杂表格（含 rowspan）慎用 nth-child
当某行 td 带 rowspan="3"，视觉上占三行，但 DOM 里仍是单个 tr。此时 nth-child 按 tr 元素数量计数，和人眼看到的“行”不一致，斑马纹会断层。
这种场景下，CSS 伪类基本失效，必须交由 JS 控制逻辑。
rowspan，硬套 nth-child 不仅无效，还会掩盖结构问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
