父元素定义的CSS变量子元素用不到，主因是DOM结构或选择器匹配问题，而非语法错误；浏览器只检查变量声明是否位于子元素的DOM祖先节点上，不依赖CSS文件加载顺序。
父元素定义的CSS变量为什么子元素用不到
子元素用不到父元素定义的--foo，几乎全是DOM结构或选择器匹配问题，不是语法写错了。浏览器只看“这个变量声明是否落在子元素的某个祖先节点上”，不看你CSS文件怎么拆、import顺序如何。
-
:root确实全局可用，但前提是目标元素真能顺着DOM往上找到它——比如<div class="card"><p>text</p></div>里，p的父级是div.card，不是:root；如果div.card没被正确渲染（class漏写、JS动态删了、display: contents打断继承链），那p就只能 fallback - 检查方法：DevTools选中子元素 → Computed面板搜
--foo→ 看“Source”列指向哪条规则；如果显示“no value”，说明根本没继承到任何声明 - 常见干扰项：
all: initial或all: unset会清空所有继承属性（包括--foo），哪怕只加在body或某个包裹容器上，也会切断整棵子树的变量继承
如何让子元素明确继承父元素的变量值
不用额外操作——只要父元素声明了--color: blue，子元素直接color: var(--color)就能用，前提是父元素确实是它的DOM祖先。
- 变量继承不依赖class名或CSS模块，只依赖真实DOM层级：即使父元素用
style=" --size: 14px "内联声明，子元素照样能继承 - 想覆盖继承值？在子元素上重新声明同名变量：
.child { --color: red; }，后续var(--color)就取red，不影响更深层的孙元素（它们会从.child继承新值） - 想彻底断开继承？用
unset：.child { --color: unset; }，这时var(--color, fallback)里的fallback就会生效
Shadow DOM里为什么读不到:root的CSS变量
不是bug，是设计使然。:root不在Shadow DOM的继承链上，宿主元素（比如<my-button>）才是它的“根节点”。
- Shadow内部要读变量，必须在宿主元素上声明：
<my-button style="--size: 16px"></my-button>，或者通过:host { --size: 16px; }在Shadow CSS里定义 - 不要指望外部
:root声明自动透入；框架如Lit或Stencil通常会显式把变量从light DOM传进Shadow，靠的是JS逻辑，不是CSS自动继承 - 调试时注意：Computed面板里看到的
--size来源如果是:root，说明当前元素不在Shadow DOM里；否则“Source”只会显示:host或内联style
变量继承和普通CSS属性继承的区别在哪
行为一致，但机制不同：普通属性（如color）继承的是计算后的值，而CSS变量继承的是未计算的声明本身。
立即学习“前端免费学习笔记（深入）”；
- 父元素设
.parent { --gap: calc(1rem + 2px); }，子元素margin: var(--gap)——每次计算都重新执行calc()，不是“继承一个固定像素值” - 父元素
font-size: 16px继承给子元素，子元素再设font-size: 1.5em，是基于继承来的16px算；但--fs: 16px继承后，font-size: var(--fs)只是取值，不参与em计算链 - 这意味着变量更适合做“配置开关”，而不是替代传统继承属性；混用时要注意：比如
line-height: var(--lh, 1.5)里的1.5是无单位数字，而line-height本身是可继承属性，两者叠加容易出意料结果
all: initial有没有悄悄插手——这些地方不打开DevTools点几下，光看代码很难发现。 
