firefox中var(--x)取不到值，是因为css变量查找失败而非不支持，需通过computed面板确认是否找到有效声明；变量继承的是父元素计算后的值（如--size: 1em在font-size: 20px下解析为20px），非声明语句本身。
Firefox里var(--x)取不到值？先看Computed面板里解析结果
Firefox对CSS变量的继承行为和其他浏览器一致，但开发者容易误判“没继承”，其实是查找失败。打开DevTools → 选中目标元素 → 右侧Computed面板搜索--x，重点看“Value”列显示的是具体值、unset、还是空（fallback未生效）。如果显示invalid或空白，说明向上没找到任何有效声明——不是Firefox不支持，是选择器没匹配到祖先节点。
常见陷阱：
-
:root写了--color: red，但DOM里漏了或标签，导致:root选择器根本没生效 - 用了
display: contents的父容器，它在DOM树中不构成视觉祖先，var()无法从它身上取值 - Shadow DOM内部元素查不到
:root变量，因为宿主元素才是它的“根”，必须把变量注入宿主节点上
为什么Firefox里--size: 1em在子元素里变成固定像素？
CSS变量继承的是“计算后的值”，不是声明语句本身。比如父元素设--size: 1em，自身font-size: 20px，那子元素里var(--size)实际取到的就是20px，不是1em。这个转换在Firefox里同样发生，且不可逆。
这会导致响应式布局错乱：当父元素font-size随视口变化时，子元素拿到的var(--size)是静态像素值，不再响应缩放。
解决办法：
- 避免用相对单位定义变量，改用
rem或px直接写死基准值 - 如需动态缩放，把变量定义在
html上：html { --size: 1rem; }，再让各组件用font-size: var(--size) - 别在中间层用
--size: unset或--size: initial，它们会切断查找链，子元素不会继续往上找
多个组件共用--primary-color却互相覆盖？Firefox里更难察觉
Firefox的Computed面板会明确标出--primary-color来自哪条CSS规则的“Source”，这是排查冲突最直接的方式。90%的覆盖问题来自第三方库悄悄往:root重写同名变量，后加载的CSS赢。
典型现象：你设了:root { --primary-color: #3498db; }，但Computed里显示来源是element-plus.css的:root规则，值却是#1890ff。
安全做法：
- 放弃全局
:root声明，改用带命名空间的容器类：.my-app { --my-primary: #3498db; } - 组件内只依赖自己的变量：
.button { background-color: var(--my-button-bg, var(--my-primary)); } - 禁用
all: unset在变量定义层使用——它会让整个继承链失效，Firefox里表现尤为彻底
el.style.setProperty('--color', 'red')后子元素没变？Firefox不特殊，逻辑一样
el.style.setProperty()只影响该DOM节点的内联样式，不会自动触发子元素重算。子元素是否变色，取决于它自己的CSS声明是否引用了同一个变量，且该变量在DOM树中某一级被定义。
例如：document.querySelector('.theme').style.setProperty('--color', 'red')，只有.theme后代中写了color: var(--color)的元素才会更新。
容易忽略的点：
- 别直接往
document.documentElement设，污染全局；绑定到语义明确的容器节点更可控 - 大量元素依赖同一变量时，每次调用
setProperty都会触发全量样式重算，Firefox里Recalculate Style时间可能飙升 - 用
requestIdleCallback包裹批量更新，比优化单次写法更有效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
