CSS变量继承本质是作用域查找而非属性继承；子元素通过var()沿DOM树向上查找最近有效声明，受:root全局作用域、局部选择器作用域、unset/initial中断及大小写敏感性影响。
CSS变量的继承不是“属性继承”，而是“作用域继承”——子元素能访问父元素定义的变量，但前提是该变量在父元素作用域内被声明且未被覆盖。
变量声明位置决定可访问范围
变量是否能被子元素读取，取决于它在哪一级选择器中被定义：
-
:root中定义的变量是全局的，所有元素（包括<html>自身）都能访问，等价于“文档级作用域” - 在
.card选择器里定义--card-padding，那么只有.card元素自身及其后代元素能读到它 - 如果
.card内部嵌套一个.card-header，且后者又重新声明了--card-padding: 12px，那它的子元素会继承这个新值，而不是外层的
var() 函数读取的是运行时作用域链，不是静态 CSS 属性继承
这和 color、font-family 这类真正可继承的 CSS 属性有本质区别：
-
color是浏览器渲染时“自动向下传递”的；而var(--x)是在计算样式阶段，沿着 DOM 树向上查找最近的有效声明 - 即使父元素没设置
display: block或没参与布局，只要它在 DOM 中存在且声明了变量，子元素就能继承 - 如果某个中间父元素显式将变量设为
unset或initial，后续子元素将无法再继承更上层的同名变量（除非有 fallback）
继承失效的常见原因
实际调试中，var() 显示为无效或回退值，往往不是语法错，而是作用域断了：
立即学习“前端免费学习笔记（深入）”；
- 变量名拼写不一致：
--bg-color和--bgColor是两个变量（区分大小写 + 短横线命名约定） - 声明在伪类或媒体查询内部，但调用处不在对应上下文（例如
@media (prefers-color-scheme: dark) { :root { --text: white; } }，在亮色模式下var(--text)就无定义） - 变量声明被更高优先级规则覆盖，但你没意识到：比如
div { --c: red; } div:hover { --c: blue; }，hover 状态下子元素读到的就是blue - 使用了
all: unset的元素会清空所有自定义属性，导致继承链中断
真正容易被忽略的是：CSS变量的“继承”不依赖 display 或 visibility，只依赖 DOM 层级和选择器作用域。哪怕一个父元素 display: none，只要它定义了 --x，其子元素仍能通过 var(--x) 读到——因为这不是渲染时的继承，而是样式计算时的作用域查找。
