子元素调用var(--x)拿不到父级值，主因是继承链中断：父级未定义--x，或中间层设为initial/unset；需用devtools逐层检查custom properties，注意大小写、all:unset影响及shadow dom/iframe隔离性。
子元素调用 var(--x) 却拿不到父级定义的值？先查继承链是否被切断
根本原因就两个：父级压根没定义 --x，或者中间某层写了 --x: initial 或 --x: unset。别急着改子元素，打开 DevTools 的“Computed”面板，点开“Custom Properties”，从子元素往上逐层看——哪一层声明了 --x，哪一层把它设成了 initial 或 unset，一目了然。
常见错误现象：
- 控制台无报错，但颜色/尺寸没变 → 很可能 fallback 生效了（比如
var(--x, #000)中的#000被用了） - 父元素明明写了
--x: red，子元素却拿到初始值 → 检查中间是否有 UI 库或重置样式注入了--x: initial - 父设
--BgColor，子写var(--bgcolor)→ CSS 变量严格区分大小写，--BgColor和--bgcolor是两个变量
unset 和 initial 在变量覆盖时效果不同
二者都会让变量“消失”，但语义和结果有差异：
-
--x: unset让该变量回到“未定义”状态，子元素调用var(--x, 8px)会取8px -
--x: initial等效于彻底删掉这行声明；在极少数涉及浏览器默认行为的场景下，它比unset更彻底 - 别用
--x: inherit—— 自定义属性不支持inherit，写上去等于无效
第三方库或全局样式悄悄加了 all: unset 怎么办？
all: unset 会清空所有可继承属性（包括自定义属性），这是最隐蔽的继承中断源。它不报错、不显眼，但一旦生效，整条链上的 var() 都会 fallback 或失效。
排查与应对：
- 检查你用的 UI 库、原子类框架或全局 reset.css 是否在某层加了
all: unset或all: initial - 若必须保留
all: unset，可在目标元素上手动补回变量：div { --x: var(--x, #3b82f6); } - React 高阶组件中透传变量时，务必用真实 DOM 节点（如
<div style="{themeVars}">），不能用 <code>>—— Fragment 不生成节点，变量无处落脚Shadow DOM 和 iframe 里为什么
:root变量不生效？:root定义的变量确实是全局的，但“全局”仅限于当前文档树。Shadow DOM 默认隔离样式和变量，iframe 则是完全独立的文档上下文。解决方案：
- Shadow DOM 内部需显式透传：在 host 元素上设置变量，并在
:host或::slotted规则中转发 - iframe 无法直接共享变量，只能靠 postMessage + JS 注入，或服务端渲染时预置
- 不要试图在
body上定义变量来“模拟全局”——body不是根，某些嵌套结构可能跳过它
--xxx: unset。它不触发警告，也不改变 DOM 结构，只在“颜色突然不对”“间距莫名归零”时露个头。 - Shadow DOM 内部需显式透传：在 host 元素上设置变量，并在
