必须用:root而非html声明CSS变量，因其特异性更高（0-1-0 > 0-0-1）、语义明确、跨文档兼容（支持SVG/XML/Shadow DOM），且是CSS规范指定的全局变量唯一可靠锚点；混用易导致覆盖异常与继承失效。
:root 和 html 都指向 HTML 文档的根元素，但它们不是“能随便换着用”的等价写法——关键差异在优先级、语义和跨文档适用性上，实际项目里混用容易踩坑。
优先级不同导致样式覆盖行为不一致
当两者同时设置同一属性（比如 background-color），:root 会赢，因为它特异性是 0-1-0，而 html 是 0-0-1。
- 浏览器按特异性数值逐位比较，
0-1-0 > 0-0-1，所以:root { background: blue; }会覆盖html { background: red; } - 这个差异在 CSS-in-JS 或组件 Scoped Style 场景下尤其明显：如果某个库自动注入了
html样式，而你用:root覆盖，可能意外生效；反之则可能失效 - 调试时别只看样式面板里“哪条被划掉”，要检查 computed 值来源——有时
html的声明明明写了，却没生效，就是被:root暗中压掉了
:root 是定义 CSS 变量的唯一推荐位置
虽然技术上你能在任意选择器里声明 --xxx 变量（比如 .card { --gap: 12px; }），但只有 :root 声明的变量才能被全局读取。
-
:root { --color-primary: #007bff; }→ 全局可用：button { color: var(--color-primary); } -
html { --color-primary: #007bff; }→ 同样能用，但语义错位：HTML 元素本身不是“变量容器”，且部分构建工具（如 PostCSS 插件）会专门识别:root做变量提取 - 若用
body或其他元素声明变量，子元素能用，兄弟/父级不能访问，极易造成复用混乱
跨文档兼容性决定能否用于 SVG 或 Web Components
:root 不是 HTML 专属，它在 SVG、XML 甚至 Shadow DOM 中都指向各自文档树的根节点；html 则只在 HTML 文档中有效。
立即学习“前端免费学习笔记（深入）”；
- 在内联 SVG 中：
:root匹配<svg>，而html完全不匹配（因为没<html>） - Web Components 的 Shadow Root 下，
:root指向该 Shadow Root，可用于封装内部变量；html在 shadow 内无效 - 如果你的项目要支持 SSR 渲染 SVG 图标或微前端嵌套，硬写
html会导致样式丢失或报错
真正容易被忽略的点是：很多人以为 :root 只是“高级一点的 html”，但它的设计初衷从来不是替代标签选择器，而是为 CSS 自定义属性提供一个语义清晰、作用域明确、跨环境稳定的锚点。一旦把它当成普通选择器滥用（比如用来设 font-size 或 line-height），后续维护时变量逻辑和布局逻辑就会缠在一起，很难解耦。
