可用CSS变量控制span颜色：在:root或父容器定义变量，span通过class或style属性引用var()；单个span可设内联--var并用color: var(--var)读取；JS动态修改应优先改CSS变量而非style.color以支持主题切换。
怎么用
绑定 CSS 变量控制颜色
CSS 变量本身不绑定到某个 HTML 元素，但你可以把变量定义在作用域内（比如
或某个父容器），再让
通过继承或类选择器读取它。关键不是“span 绑定变量”，而是“span 的 color 属性引用变量”。
常见写法是：
只需加 class：
。变量值一改，所有用
的地方自动响应。
变量必须在
计算样式时已存在（不能靠 JS 晚于 CSS 加载才定义）
避免在
属性里写
—— 行内样式不支持 CSS 函数
如果只给单个
用，可把它设为自定义属性宿主：
，然后在 CSS 中：
颜色随主题切换失效？检查这三点
很多人把
放在
下，却没看到颜色变，问题通常出在层叠逻辑上：
立即学习
“
前端免费学习笔记（深入）
”；
父级设置了
，子元素的
就会被压制 ——
优先级高于
CSS 选择器没覆盖到：写了
，但
不在
内，就拿不到新值
变量名拼错或大小写不一致：
和
是两个变量，浏览器不会自动归一
调试建议：打开 DevTools → Elements → 选中
→ 看 Computed 面板里
值是否为
的计算结果，还是
或 fallback 值。
JS 动态改
颜色时，该改变量还是改 style？
取决于变化频率和范围：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
全局统一换色（如整个页面切深色模式）→ 改
变量：
单个
因交互临时高亮（如点击后变绿）→ 直接改
更轻量：
想复用逻辑又保持可维护性 → 给
切换预设 class：
，CSS 里定义
注意：频繁调用
会绕过 CSS 变量机制，后续主题切换对这个
就无效了 —— 所以临时状态别硬编码颜色值。
为什么
里嵌套
时颜色继承异常？
CSS 变量默认是继承的，但
属性本身也继承。两层叠加容易误判来源：
比如外层
设了
，内层又设
，但
没定义，就会回退到外层的计算值（而非初始值）。更隐蔽的是，如果外层用了
，内层即使定义了变量也可能被覆盖。
可靠做法是：为每层明确作用域，例如用 data 属性隔离：
这种写法比依赖继承更可控，尤其在组件化结构中，避免父组件变量意外污染子内容。
span:rootspan:root {
--text-primary: #333;
--text-accent: #0066cc;
}
.highlight {
color: var(--text-accent);
}
span这段会变蓝var(--text-accent)spanstylevar()spanspan { color: var(--local-color, #000); }spanspandiv[data-theme="dark"]color: black !importantcolor: var(--text-color)!importantvar()[data-theme="dark"] .content { --text-color: white; }span.content--TextColor--text-colorspancolorvar(--xxx)invalidspan:rootdocument.documentElement.style.setProperty('--text-main', '#fff')spanstyle.colorspan.style.color = '#27ae60'spanspan.classList.toggle('state-success').state-success { color: var(--success); }style.color = xxxspanspanspancolorspancolor: var(--level1)color: var(--level2)--level2!important
外层
内层
[data-level="1"] { color: var(--level1); }
[data-level="2"] { color: var(--level2); }