直接用 tr:nth-child(odd) 或 tbody tr:nth-child(odd) 实现斑马纹，但需确保 tbody 内仅含 tr 标签；混入其他元素会错位，推荐改用 nth-of-type 或预设 class 提升健壮性。
如何用 nth-child 给表格行加斑马纹
直接写 tr:nth-child(odd) 或 tr:nth-child(even) 就能生效，但要注意它选的是「在父元素中位置为奇数/偶数的 tr」，不是「表格视觉上的第1、3、5…行」。如果 thead 或 tbody 里混着 tr 和其他元素（比如注释、空格文本节点不会影响，但 tr 外套了 div 就会断掉计数），nth-child 会按 DOM 顺序数，容易错位。
- 推荐把数据行统一包在
tbody里，再对tbody tr应用样式，避免受thead干扰 - 如果表格有合并行（
rowspan），nth-child不受影响——它只看标签位置，不看渲染后是否跨行 - 不要用
tr:nth-child(2n)代替even，虽然等价，但可读性差，也容易手误写成2n+1却以为是偶数
nth-child(odd) 和 nth-child(even) 的实际效果差异
两者只是起始偏移不同：odd 匹配 1, 3, 5…；even 匹配 2, 4, 6…。如果你希望第一行（表头下首行）是浅色背景，就该用 tbody tr:nth-child(odd)；反之则用 even。注意：表头 thead tr 默认不参与这个选择器匹配，除非你显式写了 thead tr:nth-child(odd) —— 一般不需要，也不建议给表头加斑马色。
- 若想让斑马纹从第二行开始交替（即第2、4、6…行为同一种色），用
tbody tr:nth-child(even) - 若表格含多组
tbody，每个tbody内部独立计数，不会跨tbody连续编号 - IE8 不支持
nth-child，如需兼容，得用 JS 动态加 class 或服务端渲染 class
为什么有时候 nth-child 斑马纹错行了
最常见原因是 HTML 结构不“干净”：比如在 tbody 里插了 tr 以外的标签（如 div、comment 或自定义组件占位符），或者用了 Vue/React 渲染时自动注入了辅助节点。此时 tr 在父容器中的位置序号被挤偏，nth-child(2) 可能对应到第3个真实 tr。
- 用浏览器开发者工具检查
tbody的子节点列表，确认是否只有tr标签 - 改用
tbody tr:nth-of-type(odd)更稳妥——它只计算同类型（tr）的兄弟元素，忽略其他标签 - 如果用了 Shadow DOM 或 Web Component，
nth-child作用域仅限于影子根内部，外部样式无法穿透
性能和可维护性提醒
nth-child 是 CSS 原生伪类，无运行时开销，比 JS 遍历打 class 快得多。但它的脆弱点在于强依赖 HTML 结构顺序——一旦后续加了新 tr（比如搜索无结果时插入提示行），整个斑马序列可能全乱。
- 对于动态表格，建议配合 BEM 类名（如
table-row--odd）由 JS 控制，CSS 只管样式，逻辑归逻辑 - 颜色别用纯黑/白做对比，至少加一点灰度（如
#f9f9f9/#fff），否则在 OLED 屏上易闪烁 - 用
background-color而非background简写，防止意外覆盖background-image或background-repeat
nth-child 越可靠；结构稍复杂，就得靠 nth-of-type 或预设 class 来兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
