:root 是匹配文档根元素的选择器，优先级高于 html，用于全局定义 css 自定义属性；:root { --color-primary: #007bff; } 即在根作用域声明变量，供全文档通过 var(--color-primary) 使用。
什么是 :root，它和 :root { --color-primary: #007bff; } 有什么关系
:root 是 CSS 中匹配文档根元素的选择器（在 HTML 中等价于 html 元素），但它比 html 优先级略高，且最关键的是：它支持定义自定义属性（即 CSS 变量）。这些变量一旦在 :root 中声明，就能在整个文档中通过 var(--color-primary) 访问。
注意：CSS 变量是**级联的、可继承的、运行时生效的**——这意味着它们可以被 JavaScript 动态修改，也能被媒体查询或伪类覆盖。这不是预处理器变量（如 Sass 的 $color），不参与编译，没有作用域嵌套限制，但也不能用于选择器或 @ 规则中。
常见错误现象：
– 在 body 或某个 class 下写 --color: red，结果子元素读不到；
– 用 html { --color: red } 替代 :root，虽能工作但语义弱、兼容性略差（IE 完全不支持）；
– 把 var(--x) 直接当值写进属性（如 color: var(--x); 正确，但 color: --x; 会报错）。
如何用 :root + data-theme 实现一键换肤
核心思路是：把主题切换逻辑从“加载多份 CSS”变成“动态切换 :root 下的一组变量值”。最可靠的方式是给 html 元素添加 data-theme 属性（如 data-theme="dark"），再用属性选择器配合 :root 覆盖变量。
实操建议：
- 所有主题变量统一放在
:root块中定义默认值（如浅色主题） - 用
:root[data-theme="dark"]重写同一组变量，覆盖为深色值 - 避免用
.dark-mode :root这种写法——它要求:root是某个 .dark-mode 的后代，而:root永远是顶层，不可能有父元素 - JavaScript 切换时只改
document.documentElement.dataset.theme，不要操作 class 或重载样式表
示例：
:root {
--bg: #fff;
--text: #333;
}
:root[data-theme="dark"] {
--bg: #1a1a1a;
--text: #e0e0e0;
}
body {
background-color: var(--bg);
color: var(--text);
}
为什么不能只靠 class 切换主题变量
有人尝试写 .theme-dark { --bg: #1a1a1a; } 然后给 html 加 class，这看似简洁，但存在严重问题：
– .theme-dark 的优先级低于 :root（因为 :root 是元素选择器，class 是类选择器），所以变量不会被覆盖；
– 即便强行提高优先级（如 html.theme-dark），也无法保证所有子元素都能正确继承新值，尤其在 shadow DOM 或复杂组件嵌套下行为不可控；
– 更关键的是：CSS 自定义属性的“作用域”取决于声明位置的**继承链起点**，而 :root 是继承链顶端，只有在这里声明或覆盖，才能确保全局一致性。
所以必须用 :root[data-theme="xxx"] 这种结构，既保持选择器权重足够（与 :root 同级但更具体），又维持了语义清晰和可预测性。
换肤时容易忽略的三个细节
实际项目上线后常因这几个点导致换肤失效或闪烁：
- 未设置 fallback 值：写
color: var(--text, #333)，而不是color: var(--text)，否则变量未定义时会回退到 inherit 或初始值，可能意外变透明 - 未处理系统偏好同步：用户开启系统深色模式时，
@media (prefers-color-scheme: dark)应该作为兜底，但它的优先级低于:root[data-theme]，所以需把它写在主题规则之后，或用 JS 初始化时读取window.matchMedia主动设data-theme - 未持久化用户选择：切换后不存 localStorage，刷新就还原；且读取时没做空值判断，
localStorage.getItem('theme') || 'light'比直接赋值更安全
变量名设计也影响维护成本：推荐用语义化前缀（如 --color-brand-primary），避免 --c1、--bg2 这类缩写，后期排查和协作成本会陡增。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
