CSS 变量 - 多个回退不起作用

Question

根据 MDN，var 函数接受多个回退。但是我无法让他们工作。

我在 Chrome、Firefox 和 Safari 上尝试了以下代码。 .demo3 的 background-color 在上述所有浏览器上都是透明的。

是代码错误，还是浏览器没有实现变量回退？

:root {
  --my-var: red;
}

.demo1 {
  background-color: var(--my-var);
}

.demo2 {
  background-color: var(--my-background, pink);
}

.demo3 {
  background-color: var(--my-background, --my-var, pink);
}

<div class="demo1">No fallback</div>

<div class="demo2">Single fallback</div>

<div class="demo3">Multiple fallbacks</div>

Answer 1

对于多个回退尝试：background-color: var(--my-background, var(--my-var, pink));

CSS 变量 - 多个回退不起作用

CSS Variables - Multiple fallbacks not working

css

css-variables