为何CSS变量需引入回退机制而非仅依赖CSS属性继承？

这个问题的核心在于CSS变量的求值逻辑和普通CSS属性完全不同，咱们一步步拆解清楚：

首先看你给出的示例里的span元素代码：

body span { 
  --color3: green; 
  color: var(--color3); 
  color: yellow; 
  color: var(--color4); 
}

按照普通CSS的层叠逻辑，最后一个color声明会覆盖前面的，但这里var(--color4)因为--color4未定义，整个属性声明直接被浏览器判定为无效——它不会回头去用前面的color: yellow或者color: var(--color3)，而是直接跳过这个属性的所有声明，去寻找继承值（也就是body的红色），这就是Text3显示红色的原因。

为什么需要回退机制？ #

普通CSS属性是直接解析具体值，只要值合法就会生效，层叠顺序决定最终用哪个。但CSS变量的逻辑是：先解析var()引用，把变量替换成对应的值，如果变量不存在，整个var()表达式就失效，对应的属性声明直接被丢弃。这时候浏览器不会去看同一元素的其他同属性声明，而是直接走继承/初始值逻辑。

回退机制的作用，就是给这个可能失效的var()表达式一个“Plan B”——当变量无效时，直接用回退值作为属性值，而不是让整个声明作废。

你提到的那些限制，其实是早期规范/实现的局限 #

你遇到的几个问题：

• color: var(--color4, --color3)无效：早期的CSS变量规范（你用的Firefox 57、Chrome 63对应2017-2018年的版本）不支持回退值里嵌套var()，但现在的浏览器已经支持这种写法了，比如var(--color4, var(--color3))在新版本Chrome/Firefox里是有效的。
• color: var(--color3, yellow, blue)不支持：这是规范明确规定的——var()只接受两个参数：第一个是变量名，第二个是单一的回退值，多出来的参数会被视为语法错误。
• 回退值不支持inherit/currentColor：同样是早期实现的问题，现在的规范允许回退值使用这些关键字，新版本浏览器已经支持。

怎么在当前环境下处理？ #

如果还需要兼容旧版本浏览器，目前只能接受值重复的写法，比如color: var(--color4, yellow)。如果想引用另一个变量作为备选，在旧浏览器里只能分开写降级逻辑：

body span {
  --fallback-color: yellow;
  color: var(--color4, var(--fallback-color)); /* 新版本浏览器生效 */
  color: var(--fallback-color); /* 旧浏览器降级兜底 */
}

本质上还是因为CSS变量的求值模型和普通属性不同，它不能像普通属性那样依赖层叠来兜底——变量失效就意味着整个声明失效，必须用回退机制来主动提供备选值。

内容的提问来源于stack exchange，提问作者Ecaterina Moraru