:root 是 CSS 伪类，匹配文档根元素（HTML 中即 ），是声明 CSS 自定义属性（以 -- 开头）的推荐全局作用域；它本身不是变量，而是提供全局生效的作用域锚点，确保变量可被所有后代继承。
什么是 :root，它真能定义“变量”？
:root 不是 CSS 变量本身，而是伪类选择器，它匹配文档的根元素（在 HTML 中恒为 ）。CSS 自定义属性（即常说的“CSS 变量”）必须声明在某个选择器作用域内，而 :root 是最常用、最稳妥的全局作用域——因为它的优先级低、作用范围最大，且不会被组件化框架意外覆盖。
- 声明必须用
--开头，例如--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 变量实现主题切换或响应式调整，得确保整个链路都绕过编译期替换，并留意继承与层叠的隐式影响。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
