css-variables - 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);
}

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

为什么会出现这种行为？

Answer 1

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

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

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