CSS变量如何从父元素继承？-css教程-PHP中文网

父元素定义的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祖先。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

变量继承不依赖class名或CSS模块，只依赖真实DOM层级：即使父元素用style=" --size: 14px "内联声明，子元素照样能继承
想覆盖继承值？在子元素上重新声明同名变量：.child { --color: red; }，后续var(--color)就取red，不影响更深层的孙元素（它们会从.child继承新值）
想彻底断开继承？用unset：.child { --color: unset; }，这时var(--color, fallback)里的fallback就会生效

不是bug，是设计使然。:root不在Shadow DOM的继承链上，宿主元素（比如<my-button></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

行为一致，但机制不同：普通属性（如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本身是可继承属性，两者叠加容易出意料结果