在 :root 中定义 CSS 变量需以 -- 开头（如 --primary-color），确保语法合法、未被更具体选择器覆盖、响应式变量须置于 @media 内，推荐原子化命名+主题 class 组合使用，并注意继承链中断、fallback 回退及伪元素/动画中的兼容性限制。
怎么在
:root
里定义真正可用的 CSS 变量
变量写在
:root
里不等于就能全局用，得确保语法合法、作用域没被覆盖、且没被意外重置。
必须用
--
开头，比如
--primary-color
，写成
primary-color
或
$primary
都无效
:root
是伪类，不是选择器层级最高的地方——如果后续有更具体的选择器（比如
body .theme-dark :root
）又重复定义同名变量，会覆盖掉根上的值
不能在
@media
外直接写媒体相关变量；想响应式切换主题，得把变量定义放进
@media
块里，或用 JS 动态切
class
初始值建议带回退（fallback），比如
color: var(--text-color, #333)
，避免变量未定义时样式崩塌
为什么
var(--color)
有时不生效，但控制台显示变量存在
变量存在 ≠ 能被当前元素计算出来。CSS 自定义属性是继承的，但计算依赖于「声明位置」和「使用位置」的级联关系。
如果变量在
:root
定义，但在某个
.card
里用
var(--bg)
，而这个
.card
又被设了
all: unset
，那继承链就断了，变量取不到
变量值里不能含非法单位或函数，比如
--size: calc(10px + );
会导致整条声明失效，浏览器会静默忽略该变量行
JS 修改时用
element.style.setProperty('--color', 'red')
，改的是该元素上的变量，不是
:root
，别误以为全局变了
如何用
:root
管理多主题色彩而不炸锅
一个常见翻车点：把所有主题色硬编码进
:root
，结果深色/浅色模式切换时颜色互相污染。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
推荐按主题分组命名，比如
--theme-light-bg
/
--theme-dark-bg
，再用 class 控制哪组生效：
body.theme-light { --bg: var(--theme-light-bg); }
避免在
:root
直接赋值语义化变量（如
--bg
），而是先定义原子变量（
--color-white
,
--color-gray-800
），再在主题 class 里组合：
.theme-dark { --bg: var(--color-gray-800); }
如果主题靠 JS 切换，记得同步更新
document.documentElement
的 class，否则 CSS 规则不触发
var()
在伪元素、动画、@keyframes 里怎么安全用
这些场景对变量支持度不一，尤其老版本 Safari 和部分安卓 WebView 会丢值或报错。
立即学习
“
前端免费学习笔记（深入）
”；
::before
和
::after
可以用
var()
，但
content
属性只接受字符串、
attr()
或计数器，不能直接
content: var(--label)
—— 必须是字符串值，比如
--label: "Save"
@keyframes
内可以引用变量，但变量必须在动画触发前已定义好；若动画运行中才通过 JS 改变量，动画不会重播，除非手动
animation: none
再恢复
过渡（
transition
）不支持对自定义变量做插值，比如
background-color: var(--bg)
不会平滑变色；得用原生属性（
background-color
）或 CSS Houdini（目前兼容性差）
变量本身不复杂，难的是它藏在级联、继承、计算时机这些看不见的地方。稍不注意，改一行
--color
，三个页面同时变灰。
