html-如何仅在CSS变量存在时使用它们?

前端之家收集整理的这篇文章主要介绍了html-如何仅在CSS变量存在时使用它们? 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我有一些CSS,我想要一个默认颜色,然后用一个变量覆盖它.当CSS变量不存在时,我要使用后备颜色.

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

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

如果未设置变量,例如注释掉,颜色将变为黑色.在这种情况下,我希望在未定义变量时颜色变回蓝色.这可能吗?

最佳答案
您可以指定fallback属性,例如var(-tintColor,blue)-请参见下面的演示:

.text {
    color: blue;
    color: var(--tintColor,blue);
}
<div class="text">some text here</div>
<div class="text" style="--tintColor: red">some text here</div>

猜你在找的HTML相关文章