直接在td或th上用var(--cell-bg)可生效，但需确保变量在:root或表格容器中定义、带fallback值（如var(--cell-bg, #f0f0f0)），避免被内联样式覆盖，th与td可通过选择器精度或独立变量区分默认色。
如何用 CSS 变量控制表格单元格的背景色
直接在 td 或 th 上用 var(--cell-bg) 就能生效，但必须确保变量在作用域内定义且有默认值。很多人卡在变量没继承或被覆盖，导致颜色不更新。
- 变量最好定义在
:root或表格容器（如table）上，避免被局部样式干扰 - 别漏写 fallback 值：
background-color: var(--cell-bg, #f0f0f0);，否则变量未定义时单元格会透明 - 如果表格嵌套（比如
td里再套table），子表不会自动继承父表的变量，得显式重新设置或用inherit
动态切换主题时，为什么部分单元格颜色没变
常见原因是 CSS 变量作用域错位或更新时机不对。比如用 JavaScript 改 :root 变量，但某些 td 被内联样式（style="background:red"）硬编码覆盖了，var() 就失效了。
- 优先用 class 控制主题，而不是直接操作 style —— 比如切换
table.theme-dark，再通过.theme-dark td { background-color: var(--cell-bg); }继承 - JavaScript 修改变量时，用
document.documentElement.style.setProperty('--cell-bg', '#333')，别改错节点 - 检查 computed style：浏览器开发者工具里看该
td的background-color是否显示为var(--cell-bg)，还是已解析成具体颜色值 —— 后者说明变量已生效，前者说明没解析，大概率是拼写错误或作用域缺失
td 和 th 共享变量但需要不同默认色怎么办
不能只靠一个 --cell-bg，得拆开或加条件。CSS 变量本身不支持 if 判断，但可以用级联和选择器精度绕过。
- 给
th单独设变量：--header-bg: var(--cell-bg, #e0e0e0);，再在th上写background-color: var(--header-bg); - 或者用选择器覆盖：
table th { background-color: var(--cell-bg, #4a5568); } table td { background-color: var(--cell-bg, #f8fafc); }，这样同一变量名也能分层控制 - 避免在
td上用!important，它会破坏变量的可维护性；真要强制，改变量值本身更安全
性能与兼容性要注意什么
CSS 变量本身无性能问题，但高频重绘场景（比如滚动时实时更新单元格颜色）可能触发 layout —— 特别是当变量影响 background-color 且单元格含 border/padding 不一致时。
- IE 完全不支持
var()，需提供降级方案（如 class 切换 + 预设色值） - 移动端 Safari 对变量动画支持有限，别对
var(--cell-bg)做transition，改用background-color直接过渡 - 如果表格很大（>1000 行），别在每个
td上单独设变量，统一由父容器控制，减少 CSSOM 查询开销
变量名拼写、作用域层级、fallback 缺失——这三个点出错概率最高，调的时候先盯住它们。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
