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

我对CSS3相当陌生，我希望能够执行以下操作：

当我将一个类添加到一个元素中时，它会覆盖此特定元素中使用的另一个类的属性。

假设我有

<a class="left carousel-control" href="#carousel" data-slide="prev">

我希望能够添加一个名为的类bakground-none，它将覆盖该类中的默认背景left。

谢谢！

有多种方法可以覆盖属性。假设你有

.left { background: blue }

例如，以下任何一项将覆盖它：

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

前两个“赢”取决于选择器的特异性；第三个!important以钝器获胜。

您还可以组织样式表，以便例如

.background-none { background: none; }

通过被夺只需顺序，即后否则同样“强大”的规则。但这会施加限制，并且要求您在重组样式表时要格外小心。

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

PS我使用的left以及background-none它们在问题中所使用的。他们是应该的类名的例子不使用，因为它们反映的具体呈现，而不是结构性或语义角色。

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

background:none !important;

尽管这是一种不好的做法，!important但对于实用程序类可能有用，但是您只需要负责任地使用它，请检查以下内容：当“使用重要”是正确的选择时

作为important关键字的替代方法，可以使选择器更具体，例如：

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

（注意：类名之间没有空格）。

在这种情况下，当class属性中同时列出.left和时，该规则将适用.background-none（无论顺序或接近程度如何）。

您应该通过增加样式的特异性来覆盖。有多种增加特异性的方法。使用!important影响效果的特异性是一种不好的做法，因为它会破坏样式表中的自然级联。

以下摘自css-tricks.com的图表将帮助您基于点结构为元素产生正确的特异性。无论哪个特异性更高，都将获胜。听起来像是游戏-是吗？

在css-tricks.com上签出样本计算。这将帮助您很好地理解概念，只需2分钟。

然后，如果您想自己产生和/或比较不同的特异性，请尝试以下特异性计算器：https：//specificity.keegan.st/，或者您也可以使用传统的纸张/铅笔。

如需进一步阅读，请尝试MDN Web Docs。

最好不要使用!important。

如果您bakground-none在其他类之后列出该类，则其属性将覆盖已经设置的属性。无需在!important这里使用。

例如：

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

和

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

链接将没有红色背景。请注意，这只会覆盖选择器的特定性较低或相同的属性。

LIFO是浏览器解析CSS属性的方式。如果使用Sass，请声明一个名为as的变量

“ $ header-background：红色；”

使用它而不是直接分配红色或蓝色之类的值。当您要覆盖时，只需将值重新分配给

“ $ header-background：blue”

然后

background-color：$ header-background;

它应该平滑覆盖。使用“！important”并不总是正确的选择。它只是一个修复程序