能，但仅限CSS作用域内全局：不被JS直接读取、不跨shadow DOM继承、不影响HTML属性；优先级高于html但低于类名/ID选择器；必须以--开头并用var()调用。
root 伪类里定义的变量真能全局用？
能，但只在 CSS 作用域内“全局”，不是 JS 可读、不能跨 shadow DOM 自动继承、也不影响 HTML 属性。很多人以为设了 :root 就像 JS 的 window 一样到处可拿，结果在 Web Component 里取不到，在内联 style 标签里覆盖失败，甚至被 !important 搞乱优先级。
实操建议：
-
:root是 CSS 中最高层级的选择器，优先级高于html，但低于任何带类名、ID 或属性的选择器（比如.btn { --c: red; }会覆盖:root的同名变量） - 变量必须用
--开头，如--primary-color；访问时必须用var(--primary-color)，直接写--primary-color不生效 - 如果在多个
<style></style>块中重复定义同一变量，后加载的会覆盖前面的——注意打包工具（如 Vite）可能打乱顺序
为什么放在 :root 而不是 html 或 body？
因为 :root 等价于文档根元素（通常是 html），但它在 CSS 优先级计算中比 html 高一级，且语义更准确：它不依赖标签名，即使未来换用 或自定义根节点（极少见），:root 依然稳定指向根。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 写成
html { --color: blue; }→ 在某些旧版 Safari（≤14.1）中，html下的变量无法被子元素通过var()继承（:root则无此问题） - 写成
body { --color: blue; }→<style></style>标签、<meta>、<title></title>等非 body 子元素无法访问该变量 - 用
@layer base { :root { ... } }→ 当前主流浏览器对@layer+:root的支持不稳定，变量可能被忽略
变量值写错类型，CSS 会静默失败吗？
会，而且非常安静。比如把 --size: 16px 用在 font-weight 上：font-weight: var(--size);，浏览器不会报错，只是回退到默认值（通常是 normal），控制台也看不到提示。
实操建议：
- 变量值类型要和使用场景匹配：数字单位（
px,rem）别塞进color，颜色值（#fff,rgb()）别塞进z-index - 用
var(--x, fallback)提供降级值，比如background: var(--bg, #fff);，避免整个样式崩掉 - 调试时在 DevTools 的“Computed”面板里搜
var(，看最终解析出的值是否符合预期；不要只信“Styles”面板里写的原始var(--x)
和 CSS-in-JS、PostCSS 变量混用时要注意什么？
CSS 自定义属性（:root 变量）是运行时机制，而 PostCSS 变量（如 $color）或 CSS-in-JS（如 styled-components 的 ${props => props.theme.color}）是构建时/JS 运行时替换，两者不互通。
容易踩的坑：
- 在
postcss-simple-vars里写了$primary: #007bff;，又在:root里写--primary: $primary;→ 报错，PostCSS 不解析var()语法，也无法把预处理器变量注入 CSS 自定义属性 - 用 JS 动态改
document.documentElement.style.setProperty('--color', 'red')，但组件里用了 CSS-in-JS 的主题对象 → 两者完全独立，JS 改了不影响 styled-components 的theme - 在
<style></style>标签里用v-bind（Vue SFC）或defineVars（Qwik）→ 这些是框架扩展，不是原生 CSS，别和:root混为一谈
复杂点在于：变量作用域、生效时机、调试路径全都不一样。一个页面里同时出现 :root、PostCSS @define-mixin、JS 主题对象时，最保险的做法是只让一种机制负责视觉变量，其余转为纯逻辑或透传桥接。
