直接用 tr:nth-child(odd) 和 tr:nth-child(even) 实现隔行变色，需确保 tbody 显式包裹数据行；thead 会干扰计数，应改用 tbody tr:nth-child(odd)；ie8 及以下需 js fallback；深色模式下须配合 prefers-color-scheme 适配背景色。
用 nth-child(odd) 和 nth-child(even) 最直接
现代浏览器都支持，不需要 JS，纯 CSS 就能搞定。关键是选对伪类：表格行用 tr 作为目标，不是 tbody 或 table。
常见错误是写成 table:nth-child(odd) —— 这匹配的是 table 元素本身在父容器里的位置，完全无效。
- 正确写法：
tr:nth-child(odd) { background-color: #f5f5f5; } - 如果表格有
thead，nth-child会把表头行也计入计数，导致第一行数据变色异常；此时改用tbody tr:nth-child(odd)更稳妥 - 颜色值建议用十六进制或 rgba，避免用命名色（如
lightgray），部分老浏览器解析不一致
IE8 及更老浏览器必须用 JS 模拟
nth-child 在 IE8 及以下完全不支持，如果仍需兼容，得靠脚本手动加 class。
最简方案是遍历 tbody 下所有 tr，给奇数索引的行加 class="odd"，再用 CSS 定义样式：
tbody tr:nth-child(odd) { background-color: #f9f9f9; }
tbody tr:nth-child(even) { background-color: #ffffff; }
/* IE8 fallback */
tbody tr.odd { background-color: #f9f9f9 !important; }
注意：!important 是为了覆盖可能存在的内联样式或更高优先级规则，但仅限 fallback 场景下使用。
用 tbody 包裹数据行是必要前提
很多手写的 HTML 表格漏掉 tbody，直接写 table > tr。这会导致两个问题：
- 浏览器会自动补全
tbody，但补全时机和规则不统一，nth-child计数可能意外包含thead或tfoot - JS 操作时，
table.tBodies[0].rows无法访问到没被包裹的行 - 语义化缺失，影响可访问性（screen reader 可能跳过无结构的行）
务必显式写出 <tbody></tbody>，哪怕里面只有一行。
深色模式下背景色要同步适配
隔行色在深色主题里容易失效——比如浅灰背景在深色模式下变成难辨别的暗灰。不能只靠 CSS 变量“一劳永逸”。
- 推荐用
color-scheme: light dark配合@media (prefers-color-scheme: dark) - 避免用
background-color: #fff这类硬编码值，改用Canvas或CanvasText等系统色关键词（需确认浏览器支持度） - 更稳的做法是监听
prefers-color-scheme变化，用 JS 切换 class，再由 CSS 控制两套配色
真正麻烦的不是加一行样式，而是保证它在不同上下文里都不突兀——比如嵌入 iframe、被 shadow DOM 隔离、或跟第三方 UI 库共存时，选择器作用域和优先级容易失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
