Question

我正在使用一个基于组件的框架，其中应用了css类以下的组件，它正在改变组件的背景颜色

background-image: linear-gradient(rgb(119, 44, 44) 0%, rgb(204, 204, 204) 100%);

但我想要这个组件的背景色

background-color: #f2dede;

我必须在上面的CSS类中进行哪些更改才能应用background-color: #f2dede;

Answer 1

在css中使用： -

.yourClass {
  background-image: none !important;
  background-color: #f2dede;
}

Answer 2

要覆盖css属性，你只需要在声明之后再次写入它。浏览器从顶部到底部读取样式文件，并仅应用同一元素的最后一个声明。

.catsandstars {
  width: 200px;
  height: 200px;
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif");
}

<div class="catsandstars"></div>

以下是您正确覆盖它的方式

.catsandstars {
  width: 200px;
  height: 200px;
  background-image:  url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif");
  background-color: transparent;
}
.catsandstars {
  background-image: none;
  background-color: #f2dede;
}

<div class="catsandstars"></div>

The !important exception

当样式声明使用！important规则时，这个声明覆盖CSS中的任何其他声明，无论在何处它在声明列表中。虽然，！重要无关具有特异性。使用！important是不好的做法，因为它使你努力调试，因为你打破了你的自然级联样式表。

一些经验法则

从不在网站范围内使用！important。

仅在页面特定的css上使用！important来覆盖站点范围或外来的css（例如来自ExtJs或YUI）。
     当您编写插件/ mashup时，
从不使用！important。

始终在
之前寻找使用特异性的方法
考虑！重要

Answer 3

CSS

.className{
  background-image: none;
  background-color: #000;
}

尝试将此代码放在CSS文件的末尾，以便让您的课程被覆盖。

注意：.className是指已为background-image提供的类标识。

Answer 4

.yourClass {
  background: #f2dede !important;
}

如何覆盖CSS类？

4 个答案: