html - 如何向 css 类 .background-color-blue 添加更多特异性，以便它覆盖默认 div 的背景颜色

Question

我有这个 CSS 类

.background-color-blue {
    background-color: #00C0FF;
}

如果需要的话，我希望能够在某些元素上使用它。

我现在它不是很语义化，但它用于 HTML 模板，意味着易于使用、体积小且通用。

我希望能够在某些面板、侧边栏、模式、顶栏菜单或任何我想要的元素上使用它

当然可以，但仅适用于尚未指定背景颜色的 div。

在这种情况下:

<div class="modal background-color-blue"></div>

.modal 已将背景颜色指定为#fff。现在它不起作用 - 它保持白色。

我找到了两种解决方案:

.background-color-blue {
    background-color: #00C0FF !important;
}

和

div.background-color-blue {
    background-color: #00C0FF;
}

我不确定这些...哪种解决方案更好？或者还有其他更好的解决方案吗？

我认为这个方法:

.modal.background-color-blue {
    background-color: #00C0FF;
}

这不好，因为我必须使用任何类似的元素来做到这一点。

和

<div class="modal">
    <div class="background-color-blue">

    </div>
</div>

也不好，因为模态已经有一些填充。

Answer 1

只需使用!important它将有助于覆盖

   .background-color-blue {
    background-color: #00C0FF !important;
}

看看这个:when-using-important-is-the-right-choice