css变量继承仅取决于dom树中的父子关系，与css文件模块、加载顺序无关；声明必须位于目标元素的祖先节点上，且受all: initial等重置属性影响。
CSS变量继承只看DOM树，不看CSS文件模块
CSS变量（--foo）的继承完全依赖DOM节点的父子关系，和你把样式写在main.css、button.css还是style attribute里毫无关系。浏览器根本不关心“模块”这个概念——它只沿着DOM往上找最近声明了--foo的祖先元素。
常见错误现象：
你在theme.css里写了:root { --color: blue; }，又在card.css里写了.card { --color: red; }，但页面里<div class="card"><p>text</p></div>中的p始终用blue——不是因为card.css没加载，而是.card没被当作p的父级（比如你漏写了class="card"，或用了display: contents导致DOM结构断裂）。
- 变量生效的前提是：声明它的选择器匹配到某个DOM节点，且该节点是目标元素的祖先
-
@import、<link>顺序、CSS-in-JS的createGlobalStyle调用时机，只影响声明是否“已存在”，不改变继承路径 - ESM中
import './button.css'和import './theme.css'谁先谁后，对变量继承无直接影响；真正起作用的是最终生成的CSS规则在DOM中的实际应用顺序
:root声明的变量为什么有时“失效”
:root确实是全局最可靠的声明位置，但它不是魔法开关——只要DOM中存在更近的同名声明，:root的值就会被覆盖。而所谓“失效”，90%是因为外部组件或框架悄悄重写了它。
典型场景：
你用antd和my-lib两个UI库，都往:root写--primary-color。如果antd的CSS后加载，它的:root { --primary-color: #1890ff; }就覆盖了你的#3498db，你的var(--primary-color)自然取到antd的值。
- 检查方式：打开DevTools → 选中目标元素 → 右侧“Computed”面板搜
--primary-color，看“Source”列指向哪条规则 - 避免冲突：不要直接依赖
:root上的第三方变量；改用带命名空间的类，如.my-app { --my-primary: #3498db; } - 注意
all: initial：任何地方对:root或其子元素用了all: initial，会清空所有继承属性（包括CSS变量），导致var()回退到fallback
Shadow DOM里读不到:root变量？不是bug，是设计
Shadow DOM的宿主元素（比如<my-button></my-button>）是继承链的起点，:root不在它的祖先链上。所以哪怕你在:root写了--size: 16px，Shadow内部font-size: var(--size)也会直接用fallback。
正确做法只有一条：把变量挂到宿主元素本身。
- HTML中：
<my-button style="--size: 16px"></my-button> - CSS中：
my-button { --size: 16px; }（注意不是my-button::part()） - JS中：
el.style.setProperty('--size', '16px') - 别写
:host { --size: inherit; }——如果宿主自己没设--size，inherit就无源可溯
iOS Safari 16.4及更早版本有引擎级bug：即使你正确设在:host上，Shadow内部仍可能读不到。这不是写法问题，2026年4月21日才修复，线上需做降级处理（比如用data-属性+JS注入）。
变量覆盖时，继承的是计算值，不是声明语句
当你写.parent { --gap: 1em; }，子元素margin: var(--gap);拿到的不是1em这个字符串，而是父元素当前font-size计算出的具体像素值（比如16px）。这意味着后续父元素font-size变了，子元素var(--gap)会自动响应，但如果你在子元素里再设--gap: 2em，它基于的是子元素自己的font-size，和父元素无关。
- 这种“继承计算值”的行为常导致意外：父设
--size: 1em，子设font-size: 20px，再用var(--size)得到的就是20px，不是1em - 想保持相对单位语义？改用
clamp()或calc()组合，比如--size: clamp(1rem, 1.2vw, 1.5rem) - 调试技巧：在DevTools里鼠标悬停
var(--gap)，会显示解析后的具体数值和来源节点
真正容易被忽略的点是：变量继承链一旦断裂（比如中间某层用了all: unset），下游所有var()都会 fallback，而且这个过程不可逆——你不能靠在下游再声明一次来“修复”上游断掉的继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
