Question

我有这个CSS类

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

我希望能够在需要时在某些元素上使用它。

我现在不是很语义，但它用于HTML模板，它易于使用，体积小，通用。

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

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

在这种情况下：

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

.modal已经为#fff指定了bg颜色。现在它不起作用 - 它保持白色。

我找到了两个解决方案：

.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>

也不好，因为modal已经有了一些填充。

Answer 1

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

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

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

Answer 2

如果你认为模态将能够有不同的颜色，我想你会喜欢这个（ITCSS - BEM的灵感）。这将帮助您保持较低的特异性率，防止您在将来的课程中遇到一些问题或者必须覆盖它们。

这里的例子： http://codepen.io/AxelCardinaels/pen/ZGVKzp

HTML：

<div class="container">
  <div class="modal modal--grey">
    <h1 class="modal__title"> Modal Title</h1>
    <p class="modal__text">Hello this is the content of the modal !</p>
  </div>
</div>

CSS：

/*Base Class */

.modal{
  width:40%;
  margin:0px auto;
  padding:20px;
  text-align:center;
  border-radius:10px;
  box-shadow:1px 1px 1px rgba(1,1,1,0.3);
}

/*Attribute classes for the modal, just make a choice in your HTML ! */

.modal--grey{
  background:rgb(220,220,220);
  border:1px solid rgb(200,200,200);

}

.modal--blue{
  background:rgb(65,105,225);
  border:1px solid rgb(58,95,205);

}

Answer 3

正确的用法是

! important

通常它应该是蓝色背景。也许是阻止蓝色元素的其他因素。

但不要忘记;考虑到最后一个！重要。

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

3 个答案: