在 :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，结果深色/浅色模式切换时颜色互相污染。
- 推荐按主题分组命名，比如
--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，三个页面同时变灰。 
