直接用 --row-odd-bg 变量会失效，是因为 :nth-child(odd) 是静态选择器，不感知 tr 元素上的内联变量；变量必须在使用前于 :root 或 table 作用域声明，并配合 table tbody 限定选择器以避免干扰。
为什么直接用 --row-odd-bg 变量会失效？
变量本身不会“失效”，但常见错误是把 style="--row-odd-bg: #f0f0f0" 写在 tr 元素上，再指望 tbody tr:nth-child(odd) { background-color: var(--row-odd-bg); } 能动态响应——这做不到。因为 :nth-child() 是静态选择器，它不感知单个 tr 上的内联变量，只读取全局或作用域内已定义的变量值。
实操建议：
- 变量必须在使用前声明，且作用域覆盖目标元素
- 推荐统一在 :root 或 table 上定义，避免分散在每行里
- 不要用内联 style 覆盖变量，否则破坏统一控制能力
tbody tr:nth-child(odd) 必须配合变量作用域写法
仅写 tr:nth-child(odd) 很容易被 thead 干扰，导致第一行数据没变色；而变量若只定义在 :root，又可能被其他组件污染。最稳的组合是：
复制AI写代码:root { --row-odd-bg: #f8f9fa; --row-even-bg: #ffffff; }table tbody tr:nth-child(odd) { background-color: var(--row-odd-bg); }table tbody tr:nth-child(even) { background-color: var(--row-even-bg); }
要点：
- 显式限定 tbody，排除 thead 和 tfoot 干扰
- 用 table tbody 开头增强选择器特异性，避免被第三方 CSS 覆盖
- 颜色值推荐用 hsl() 或 rgba()，方便后续调对比度，比如 hsl(210, 8%, 95%)
深色模式下变量怎么自动切换？
不能靠 JS 监听系统主题再重设变量——太重。CSS 原生支持 @media (prefers-color-scheme: dark)，但必须确保变量重定义发生在同一作用域层级，否则 var(--row-odd-bg) 仍取默认值。
正确写法：:root { --row-odd-bg: #f8f9fa; --row-even-bg: #ffffff; }@media (prefers-color-scheme: dark) { :root { --row-odd-bg: #212529; --row-even-bg: #343a40; }}
注意：
- @media 内必须重写整个 :root 变量块，不能只写部分
- 别在 tbody 或 table 上定义变量后又在 @media 里改它——作用域不匹配，无效
- 测试时手动切系统模式，别只靠浏览器开发者工具模拟
表格有 rowspan 还能用这套方案吗？
能。CSS 变量 + :nth-child() 完全不受 rowspan 影响，因为伪类只看 DOM 中 tr 的顺序位置，不看视觉行高。真正的问题是：当某行 td rowspan="3" 占据三行高度，相邻两行颜色相同，看起来像“断掉”了隔行效果。
这不是 bug，是预期行为。应对方式：
- 接受这种视觉偏差，它不影响可访问性或数据语义
- 若业务强要求视觉节奏一致，改用 JS 动态打标：tr[data-row-index="1"]、tr[data-row-index="2"]…再配变量
- 绝对不要用 tr:nth-child(2n+1) 加额外 class 去“修复”——DOM 插入新行后序号全乱，维护成本陡增
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
