:root是唯一语义正确、兼容稳定、作用域明确的全局CSS变量声明位置；body声明会导致继承失效、旧版Safari不识别、层叠不可预测，因变量查找仅向上至:first-root，而body非根元素。
:root 和 body 声明 CSS 变量的实际效果差异
直接结论：:root 是唯一语义正确、兼容稳定、作用域明确的全局变量声明位置；body（或html）上声明变量属于误用，会导致继承失效、旧版 Safari 不识别、层叠行为不可预测。
常见错误现象：在 body { --color: red; } 中定义变量，但子元素中 color: var(--color); 渲染为默认色（如黑色），尤其在 iOS Safari 15.6 之前版本完全不生效。
-
:root是 CSS 规范定义的“文档根元素伪类”，匹配 HTML 文档的<html>元素，且在 SVG/XML 等非 HTML 场景下仍有效；body只是普通元素，不具备根级语义 - 层叠优先级上，
:root的选择器权重（0,0,1,0）略高于body（0,0,0,1），当两者同时声明同名变量时，:root的值会胜出 - CSS 变量的继承机制依赖“计算值传递”而非样式继承，浏览器查找变量时只向上遍历 DOM，但仅从被声明的元素开始——
body不是根，其父html若未声明该变量，查找即终止
为什么 var() 查找失败不是“继承没发生”，而是“变量未定义”
var(--x) 不是继承属性，而是运行时求值表达式。它不会像 color 那样自动沿 DOM 向上传播值，而是按规范执行“变量作用域链查找”：从当前元素开始，逐级向上直到 :root，中途遇到第一个声明该变量的祖先就停止。
这意味着：
立即学习“前端免费学习笔记（深入）”；
- 如果变量只在
body声明，而某个子元素位于<body><div id="app"><p>xxx</p></div></body>结构中，p元素能查到（因为body是其祖先） - 但如果页面结构含
<body><svg><g><text>xxx</text></g></svg></body>，SVG 内的<text>在部分浏览器中无法访问body上的变量（因 SVG 元素不在 HTML 继承链中） -
:root声明则无此问题：所有 HTML/SVG 子元素都能可靠查到，因为:root总是它们的最远可及祖先
层叠层（@layer）与 :root 变量共存时的优先级关系
层叠层控制的是 CSS 规则的**应用顺序**，不影响变量本身的定义时机或作用域。变量是否可用，只取决于是否在作用域链中被声明过，和它写在哪个 @layer 里无关。
但要注意一个易忽略点：变量值本身可以被层叠层中的规则“覆盖”——只要在同一作用域内重新声明。
- 以下写法合法且常见：
@layer base { :root { --spacing: 8px; } } @layer theme { :root { --spacing: 12px; /* 覆盖 base 层的值 */ } } - 变量声明的层叠顺序遵循 CSS 层叠规则：后出现的同名声明覆盖先出现的，与
@layer声明顺序一致（即@layer a, b;中b层优先级更高） - 不要把变量写在非
:root的层内选择器里（例如@layer components { .btn { --size: 1rem; } }），这样变量只对该选择器匹配的元素生效，不是全局的
调试 CSS 变量未生效的三步检查法
当 var(--x) 显示为 fallback 或完全无效时，别急着改 JS 或重写样式，按顺序确认这三点：
- 打开开发者工具 → Elements 面板 → 选中目标元素 → 查看右侧 Styles 面板中
var(--x)是否显示为“invalid”或带删除线；若如此，说明变量未定义 - 点击该
var()行左侧小箭头展开，查看“Computed”标签页中对应属性的最终计算值；若为空白或 fallback 值，说明变量查找失败 - 在 Styles 面板顶部搜索
--x，确认是否只在body或某 class 里声明；立刻改为:root { --x: ...; }并刷新
真正麻烦的从来不是语法写错，而是你以为它“应该能继承”，结果它根本没打算继承——CSS 变量不是样式属性，它是一套独立的作用域系统。写在 :root 里，才是把它放进“全局命名空间”的唯一正解。
