如何覆盖 CSS 类？

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属性所需要做的就是在声明之后再次编写它。浏览器从上到下读取您的样式文件，并仅应用同一元素的最后一个声明。

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

！重要的例外

当 !important 规则用于样式声明时，该声明会覆盖 CSS 中的任何其他声明，无论它在声明列表中的任何位置。虽然， !important 与特异性无关。使用 !important 是不好的做法，因为它使调试变得困难，因为您破坏了样式表中的自然级联。

一些经验法则

切勿在站点范围的 css 上使用 !important。

仅在覆盖站点范围或外部 css（例如来自 ExtJs 或 YUI）的页面特定 css 上使用 !important。

在编写插件/混搭时，切勿使用 !important。

总是先寻找一种使用特异性的方法

考虑 !important