html - 如何覆盖 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>

The !important exception

When an !important rule is used on a style declaration, this declaration overrides any other declaration made in the CSS, wherever it is in the declaration list. Although, !important has nothing to do with specificity. Using !important is bad practice because it makes debugging hard since you break the natural cascading in your stylesheets.

一些经验法则

Never use !important on site-wide css.

Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).

Never use !important when you're writing a plugin/mashup.

Always look for a way to use specificity before even

considering !important