我的问题是为什么 CSS 变量需要添加回退的概念，而不是像其他 CSS 属性一样依赖继承。
例如：
:root {
--color1: red;
}
body {
color: var(--color1);
}
body p {
color: var(--color2);
--color2: blue;
}
body span {
--color3: green;
color: var(--color3);
color: yellow;
color: var(--color4);
}<body>
Text 1
<p>
Text 2
</p>
<span>
Text 3
</span>
</body>文本 3 最终变成红色而不是绿色或黄色。尽管级别上存在有效属性，但它采用父颜色值，而不是验证同一级别上是否还有其他有效值。当变量名称无效时会发生这种情况。
显然，CSS 变量有一个特殊的回退，因此您需要使用以下内容：
color: var(--color4, yellow);
但这又意味着颜色的重复，因为
color: var(--color4, --color3);
不起作用。既不是：
color: var(--color3, yellow, blue);
或任何其他多个值。
也不支持像inherit、currentColor、initial等关键字。所以我不确定如何依赖继承，因为显然我需要对给定的值非常明确。在 Firefox 57.0.1 和 Chrome 63 上测试。
我知道 …