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

Question

我是CSS3的新手,我希望能够做到以下几点:

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

让我们说我有

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

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

谢谢!

Answer 1

可以通过不同的方式覆盖属性.假设你有

.left { background: blue }

例如,以下任何一个都会覆盖它:

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

选择者特异性的前两个"胜利"; 第三个胜利!important,一个钝器.

您还可以组织样式表,例如规则

.background-none { background: none; }

胜只需通过订单,将成为即后否则同样"强大"的规则.但这会施加限制,并要求您在样式表的任何重组中要小心.

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

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

Answer 2

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

background:none !important;

看看这个:何时使用 - 重要 - 是正确的选择

Answer 3

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

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

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

在这种情况下,当两个.left和.background-none都列在类属性中时(无论顺序或接近程度如何),规则将适用.

Answer 4

您应该通过增加样式的特异性来覆盖.有不同的方法来提高特异性.使用!important哪种效果特异性,是一种不好的做法,因为它打破了样式表中的自然级联.

以下来自css-tricks.com的图表将帮助您根据点结构为您的元素生成正确的特异性.无论哪种特异性都有更高的分数,都会获胜.听起来像一场比赛 - 不是吗？

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

如果您喜欢自己制作和/或比较不同的特性,请尝试使用此特异性计算器:https://specificity.keegan.st/或者您可以使用传统的纸/铅笔.

如需进一步阅读,请尝试MDN Web Docs.

最好不要使用!important.

Answer 5

如果bakground-none在其他类之后列出该类,则其属性将覆盖已设置的类.这里没有必要使用!important.

例如:

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

和

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

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