html 如何在CSS变量存在的情况下使用它们？

h5qlskok 于 2023-09-28 发布在其他

关注(0)|答案(1)|浏览(115)

我有一些CSS，我想要一个默认的颜色，然后覆盖它与变量。当CSS变量不存在时，我想使用回退颜色。

:root {
    /*--tintColor: red;*/
}

.text {
    color: blue;
    color: var(--tintColor);
}

当变量没有被注解掉时，颜色会变成黑色。我希望在这种情况下，当变量没有定义时，颜色福尔斯回蓝色。这可能吗？

1条答案

您可以像var(--tintColor, blue)一样指定**fallback**属性-请参见下面的演示：

.text {
    color: var(--tintColor, blue);
}

<div class="text">some text here</div>
<div class="text" style="--tintColor: red">some text here</div>