可行，但需在:root定义CSS变量并用tbody>tr:nth-child(odd/even)引用；不能在tr内联style中直接使用var()，因:nth-child不响应变量动态变化且易导致表头误匹配。
直接用 CSS 变量实现表格隔行变色是可行的，但必须配合 :nth-child() 选择器使用，不能把变量写在 tr 的内联 style 上——:nth-child 不响应运行时变量变化。
为什么不能在 tr 上用 style="background-color: var(--row-odd-bg)"
因为 :nth-child() 是 CSS 伪类，它匹配的是 DOM 中的位置关系，不是属性值。你给每个 tr 手动加 style 并设变量，浏览器不会根据“第几个”自动切换变量值；变量本身也得有定义源，否则就是 transparent 或 fallback 值。
-
tr:nth-child(odd)必须搭配声明好的变量，比如写在:root或table上 - 变量不能只靠 JS 动态改
document.documentElement.style.setProperty()就让所有tr:nth-child(odd)实时重绘背景——它会生效，但逻辑上不可控、难维护 - 如果表格结构含
thead，又没限定作用域，tr:nth-child(odd)会先匹配到表头行，导致第一行数据漏掉
正确写法：在 :root 定义变量 + tbody > tr:nth-child() 引用
变量要提前定义在作用域顶层（如 :root），再用具体选择器引用。这样既支持主题切换，又保证样式可预测。
code:root {
--row-odd-bg: #f9f9f9;
--row-even-bg: #ffffff;
--row-hover-bg: #eef7ff;
}
tbody > tr:nth-child(odd) {
background-color: var(--row-odd-bg);
}
tbody > tr:nth-child(even) {
background-color: var(--row-even-bg);
}
tbody > tr:hover {
background-color: var(--row-hover-bg) !important;
}
- 用
>确保只匹配tbody的直系tr，避开注释/换行文本节点干扰 - 悬停样式加
!important是合理场景——它比:nth-child()优先级高，且目的明确 - 颜色变量建议用
hsl()或rgba()，比如--row-odd-bg: hsl(210, 8%, 95%)，方便后续微调明暗
动态主题切换时，别只改变量值
单纯 JS 改 document.documentElement.style.setProperty('--row-odd-bg', '#2d2d2d') 虽然能刷新背景，但容易出错：比如用户切深色模式后，忘记同步更新 --row-hover-bg，或者没处理 th 行的背景一致性。
立即学习“前端免费学习笔记（深入）”；
- 更稳妥的做法是用
data-theme="dark"配合预设规则：code[data-theme="dark"] { --row-odd-bg: #2d2d2d; --row-even-bg: #3a3a3a; --row-hover-bg: #4a4a4a; } - 避免在
tr上写style="background-color: var(--row-odd-bg)"——这会让:nth-child()失效，变成全行同色 - 如果要用 Sass 编译多主题，变量应定义为 map，用
@each输出带 class 前缀的规则，而不是靠 JS runtime 切换
最常被忽略的是：变量名必须拼写完全一致，且定义位置必须在使用它的选择器作用域内；另外，rowspan 不影响 :nth-child() 计数，但会让视觉“行高”和 DOM 行数不一致——这时候仅靠背景色已不足以区分数据行，得加细边框或 hover 提示辅助。
