如何使用另一个 CSS 类覆盖 CSS 类的属性

小开

只要使用 !important它将帮助覆盖

background:none !important;

虽然据说这是一种不好的做法，但是 !important对于实用程序类是有用的，您只需负责任地使用它，请检查以下内容: 当使用重要是正确的选择时

小开

如果在其他类之后列出 bakground-none类，则它的属性将重写已经设置的属性。这里不需要使用 !important。

例如:

.red { background-color: red; }
.background-none { background: none; }

还有

<a class="red background-none" href="#carousel">...</a>

链接不会有红色背景。请注意，这仅覆盖具有较少或同等特定的选择器的属性。

小开

作为 important关键字的替代，您可以使选择器更具体, 例如:

.left.background-none { background:none; }

(注意: 类名之间没有空格)。

在这种情况下，当类属性中同时列出 .left和 .background-none时(不管顺序或邻近程度如何) ，该规则将适用。

小开

可以通过不同的方式重写属性

.left { background: blue }

例如，下列任何一项都会覆盖它:

a.background-none { background: none; }
body .background-none { background: none; }
.background-none { background: none !important; }

The first two “win” by selector specificity; the third one wins by !important, a blunt instrument.

You could also organize your style sheets so that e.g. the rule

.background-none { background: none; }

赢得简单的顺序，即通过成为 after一个否则同样“强大”的规则。但是这会带来一些限制，并要求您在重新组织样式表时要小心。

这些都是 CSS 级联的例子，CSS 级联是一个至关重要但却被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。

另外，我在问题中使用的是 left和 background-none。它们是应该使用没有的类名的例子，因为它们反映的是特定的呈现，而不是结构或语义角色。

小开

LIFO 是浏览器解析 CSS 属性的方式

"$header-background: red;"

使用它，而不是直接赋值，如红色或蓝色。如果要重写，只需将值重新分配给

“ $header- 背景: 蓝色”

那么

背景-颜色: $header-背景;

it should smoothly override. Using "!important" is not always the right choice..Its just a hotfix

小开

You should override by increasing 具体 of your styling. There are different ways of increasing the Specificity. Usage of !important which effects specificity, is a 坏习惯 because it breaks natural cascading in your style sheet.

下面的图表从 Css-tricks.com将帮助您产生正确的特异性为您的元素的基础上的点结构。哪个特异性的分数高，哪个就赢。听起来像个游戏，不是吗？

在 Css-tricks.com上查看样本计算。这将帮助你很好地理解这个概念，它只需要2分钟。

如果你喜欢自己制作和/或比较不同的特性，试试这个特性计算器: https://specificity.keegan.st/或者你可以只使用传统的纸/铅笔。

如需进一步阅读，请尝试 MDN 网络文档。

最好不要使用 !important。