CSS變量 - 多個回退不起作用

Question

根據MDN，var函數接受多個回退。但我無法讓他們工作。

我在Chrome，Firefox和Safari上試過以下代碼。在上述所有瀏覽器中，background-color對於.demo3都是透明的。

這是代碼錯誤，還是因爲瀏覽器沒有實現變量後備？

: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));