:root是css伪类，匹配文档根元素，是css变量的推荐全局作用域；它比html选择器语义更明确、特异性更高（0,1,0 vs 0,0,1），且在svg/xml中通用，确保变量可靠继承与生效。
什么是:root，它和html有什么区别
:root是CSS伪类，匹配文档的根元素，在HTML中就是html元素，但语义更明确：它是CSS变量（自定义属性）的**推荐作用域**。用:root而非html声明变量，是因为它在SVG、XML等非HTML文档中也适用，且CSS优先级略高（:root特异性为0,1,0，html为0,0,1），能确保变量不被意外覆盖。
常见错误现象：html { --color-primary: #333; }看似可行，但在某些嵌套组件或Shadow dom场景下，变量可能无法继承或被重置；而:root是CSS规范指定的“全局作用域锚点”，浏览器强制保证其子元素可继承。
- 必须写在样式表顶层（不能嵌套在
@media或.class里，否则不是全局生效） - 变量名必须以
--开头，比如--spacing-md，否则不被识别为自定义属性 - 值可以是任意合法CSS值：
1rem、rgb(255, 0, 0)、甚至var(--color-primary)（支持链式引用）
怎么在:root里定义并使用CSS变量
定义变量只是第一步，关键在如何可靠读取。变量本身不生效，必须用var()函数注入到实际属性中。
示例：
立即学习“前端免费学习笔记（深入）”；
:root { --color-bg: #f8f9fa; --border-radius: 4px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); } .card { background-color: var(--color-bg); border-radius: var(--border-radius); box-shadow: var(--shadow-sm); }注意：var()函数第二个参数是fallback（回退值），当变量未定义或无效时启用。比如var(--color-text, #333)——这在主题切换或动态注入变量时特别重要，避免样式崩塌。
- fallback不能含空格或逗号，否则解析失败；如需多值，写成
var(--size, 16px)，别写var(--size, 16 px) - 变量值不会自动“计算”，
--size: 16+px不行，得写全--size: 16px - 媒体查询内可重定义
:root变量，实现响应式主题：@media (prefers-color-scheme: dark) { :root { --color-bg: #1a1a1a; } }
为什么var()有时不生效？常见失效场景
变量未生效，90%不是语法错，而是作用域或时机问题。CSS变量是**继承性属性**，但只继承自父元素，不是“全局广播”。:root是顶层父节点，所以所有元素默认继承，但以下情况会中断：
- 显式设置
all: initial或all: unset的元素，会清空继承链，导致var()取不到值 - Shadow DOM边界：普通DOM里的
:root变量**不会穿透**进Shadow Root，必须在Shadow Root内重新定义或通过inherit显式传递 - 变量名拼写不一致：大小写敏感，
--Color-Primary≠--color-primary - CSS加载顺序：如果变量定义在使用它的规则之后（比如CSS文件顺序颠倒），且无fallback，则计算为invalid，最终取属性默认值（如
color: var(--text);变成color: inherit）
调试建议：在DevTools中选中元素，看Computed面板里该属性是否显示为var(--x)还是已解析的值；若仍显示var()，说明变量未找到或无效。
性能和兼容性要注意什么
CSS变量本身没有运行时性能损耗，但滥用会间接影响渲染效率。现代浏览器（chrome 49+、firefox 31+、safari 9.1+、edge 15+）均支持，IE全系不支持——如果需兼容IE，必须用postcss插件（如postcss-css-variables）编译为静态值，或搭配js降级方案。
- 避免在大量元素上高频修改变量（如滚动监听中反复
document.documentElement.style.setProperty('--y', y + 'px')），会触发频繁重排；改用transform或will-change优化 - 变量值不要过度嵌套：
var(--a, var(--b, var(--c)))可读性差，且部分旧版Safari对嵌套深度有限制 - 服务端渲染（SSR）时，若变量依赖客户端JS注入（如主题色），首屏可能闪动；应把初始变量写死在HTML的
style标签里，或由后端根据UA/配置输出
最易被忽略的一点：CSS变量不参与预处理器（如sass）的编译，$sass-var和--css-var完全隔离。混用时别指望#{ $sass-var }能生成--css-var，得手动桥接。