CSS 自定义属性作为另一个的后备值而不是固定（预定义）值

Question

CSS 自定义属性允许在缺少变量的情况下回退值，例如：

:root {
  --color1:red;
  --color2:blue;
}

body {
  background:var(--color1,gray);
  color:var(--foo,yellow);
}

将导致 BODY 具有红色背景色（因为 --color1 确实存在），但文本为黄色，因为 --foo 自定义属性不存在。

似乎无法对后备值使用 CSS 自定义属性，因此此代码：

body {
  background:var(--color1,gray);
  color:var(--foo,--color2);
}

不会生成 blue 文本，但会使用默认的浏览器颜色，通常是黑色。

为什么会出现这种行为？

Answer 1

自定义属性或 CSS 变量只能使用 var() 函数访问。

使用var(--my-var, var(--my-background, pink)).

有关更多信息，请查看 Custom property fallback values。

CSS custom properties as fallback value of another one instead of fixed (predefined) value