CSS变量继承本质是向上查找最近声明，非失效而是中间层重定义；调试需查Computed面板“Defined in”，伪元素和Shadow DOM需显式透传，fallback仅在变量完全未定义时生效。
为什么var(--x)在子元素里突然变了值
不是继承失效，而是中间某层悄悄重定义了同名变量。CSS自定义属性的“继承”本质是沿选择器链向上查找最近一次声明——只要某个父级选择器写了--x: blue，它下面所有后代都会用这个值，哪怕你本意只想影响局部。
- 常见场景：全局
:root { --primary: #007bff; }+ 组件内.card { --primary: #6c757d; }→ 所有.card后代都拿到灰蓝，而非全局蓝 - 调试方法：在 DevTools 的 Computed 面板搜索
--primary，点开箭头看“Defined in”指向哪条规则 - 容易被忽略：伪元素（如
::before）和@keyframes不自动继承变量，但若父元素声明了，它们仍能通过var()读取——前提是没被中间层覆盖
如何让子组件“免疫”父级变量覆盖
不能靠inherit（对--xxx无效），也不能靠删掉父级声明（破坏全局一致性）。真正可控的方式，是在子组件容器上显式切断继承链。
- 用
all: unset清空所有继承来的变量：但风险高，可能连color、font-family也一并清掉 - 更安全的做法：在子组件根元素上重声明关键变量，值设为
initial或具体值，例如.chart { --color: initial; }→ 后代调用var(--color, #333)时会 fallback 到#333 - 如果子组件是 Web Component，必须在宿主元素（如
<my-chart></my-chart>）上设置变量，Shadow DOM 内部不会自动继承外部.parent里的--x
var(--x, fallback)为什么没 fallback
回退值只在变量“完全未定义”时触发，不是“继承中断”或“值为unset”时才用。很多人误以为unset等于“没定义”，其实它是一个明确的值，会阻断 fallback。
-
.parent { --x: unset; } .child { color: var(--x, red); }→color变成 transparent（unset对color等价于initial，即color: currentColor，但currentColor未定义时表现为空） - 想确保 fallback 生效，得让变量彻底“不存在”：要么不声明，要么用
all: initial（慎用），或者干脆在子组件上写--x: initial，此时var(--x, red)才会取red - 旧版 Safari 对
var()解析严格，拼错变量名或漏写--前缀会导致整条样式声明被丢弃，文字变不可见
React/Vue 项目中动态覆盖变量的实际操作
JS 设置变量不是“改 CSS”，而是往特定 DOM 节点的style属性里塞--x，生效范围仅限该节点及其后代。这比改:root更精准，也避开了框架样式表的权重干扰。
立即学习“前端免费学习笔记（深入）”；
- React 中用
ref：const cardRef = useRef(null); useEffect(() => { if (cardRef.current) { cardRef.current.style.setProperty('--gap', '12px'); } }, []); - Vue 中用
ref+onMounted，原理相同 - 注意：不要在 document.body 或 :root 上批量 setProperty，否则所有用到该变量的地方都会响应——这不是局部覆盖，是全局污染
.ant-btn里写了--btn-height: 32px，而你只在:root里改了--btn-height，它根本不会响应——因为它的声明在更具体的规则里，且加载顺序靠后。这时候，不是变量继承逻辑出了问题，是你的覆盖动作根本没打中靶心。 
