如何通过:root伪类在HTML中设置全局CSS变量？

本文共计720个文字，预计阅读时间需要3分钟。

:root 不是 CSS 变量本身，而是一个伪类选择器，它匹配文档的根元素。在 HTML 中，这通常表示为 `` 元素。

• 声明必须用 -- 开头，例如 --primary-color: #007bff
• 它不支持计算或函数调用（如 calc() 需写在使用处，不能放在变量值里）
• 浏览器兼容性良好（Chrome 49+、Firefox 31+、Safari 9.1+），IE 完全不支持

怎么写才真正生效？注意声明位置和语法细节

:root 声明必须出现在实际使用前，且不能嵌套在媒体查询、@layer 或其他规则内部（除非你明确想做条件变量）：

:root { --spacing-xs: 4px; --spacing-sm: 8px; --border-radius: 4px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }

• 不要漏掉分号（最后一个声明后也建议保留，避免后续追加时出错）
• 值中不能有空格环绕冒号（--color: red 合法，但 --color : red 会失效）
• 字符串值需加引号（--title-font: "Inter", sans-serif），否则空格会被截断

怎么在组件里安全读取和 fallback？

用 var() 函数读取，第二个参数是 fallback（仅当变量未定义或无效时生效）：

.button { background-color: var(--primary-color, #007bff); padding: var(--spacing-sm) var(--spacing-md, 12px); border-radius: var(--border-radius); }

• fallback 不支持嵌套 var()（var(--color, var(--fallback)) 会报错）
• fallback 也不能是另一个自定义属性名（如 var(--color, --default-color) 不起作用）
• 如果变量名拼错（如 var(--primry-color)），且没写 fallback，该声明直接被忽略，不报错也不警告

为什么有时改了 :root 变量，页面没更新？

常见原因不是语法问题，而是：

立即学习“前端免费学习笔记（深入）”；

• 变量被更具体的选择器覆盖（比如某组件写了 .card { --primary-color: #6c757d }，那它内部就看不到 :root 的值）
• JS 动态修改时用了错误方式：document.documentElement.style.setProperty('--color', 'red') 才正确；直接改 style.cssText 会清空已有变量
• 构建工具（如 PostCSS）启用了 CSS 变量转译，把 var(--x) 编译成了静态值，导致运行时无法动态响应

真正要靠 CSS 变量实现主题切换或响应式调整，得确保整个链路都绕过编译期替换，并留意继承与层叠的隐式影响。