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

2024-05-20 • 问答

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

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

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

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

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

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

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

为什么这种行为？

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

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

有关更多信息，请签出Custom property fallback values。

本文链接：https://www.f2er.com/2933420.html