: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 文档的元素，且在 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声明，而某个子元素位于<div id="app"><p>xxx</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></div>结构中，p元素能查到（因为body是其祖先） - 但如果页面结构含
<svg><g><text>xxx</text></g></svg>，SVG 内的<text></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 里，才是把它放进“全局命名空间”的唯一正解。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
