我对 CSS3 还很陌生，我希望能够做到以下几点：
当我将一个类添加到一个元素中时，它会覆盖该特定元素中使用的另一个类的属性。
假设我有
<a class="left carousel-control" href="#carousel" data-slide="prev">
我希望能够添加一个名为bakground-none 的类，它将覆盖left 类中的默认背景。
谢谢！
【问题讨论】：
标签： css class overriding
有多种方式可以覆盖属性。假设你有
.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 的示例，这是一个重要但被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。
附：我在问题中使用了left 和background-none。它们是不应该使用的类名示例，因为它们反映了特定的渲染而不是结构或语义角色。
【讨论】：
left 和background-none？
button、name-label 等）。其他人认为如果您使用这种方法，CSS 将变得难以管理，您应该使用“实用程序优先”或“功能性”css，其中类对应于属性值（例如margin-top-4、width-10 等）。从历史上看，“语义”方法一直占主导地位，而最近“功能”方法已获得追随者。在一个中等规模的项目上尝试两者，然后自己决定哪个更好。
只需使用!important 将有助于覆盖
background:none !important;
虽然据说这是一种不好的做法，!important 对实用程序类很有用，你只需要负责任地使用它，检查一下：When Using important is the right choice
【讨论】：
您应该通过增加样式的特异性来覆盖。有不同的方法来增加特异性。使用影响特异性的!important 是一种不好的做法，因为它会破坏样式表中的自然级联。
下图取自css-tricks.com 将帮助您根据点结构为您的元素生成正确的特异性。无论哪个特异性得分更高，都会获胜。听起来像是一场游戏 - 不是吗？
在css-tricks.com 上查看示例计算。这将帮助您很好地理解这个概念，并且只需要 2 分钟。
如果您想自己制作和/或比较不同的特性，请试试这个特性计算器：https://specificity.keegan.st/，或者您可以只使用传统的纸/铅笔。
如需进一步阅读，请尝试MDN Web Docs。
最好不要使用!important。
【讨论】：
作为important 关键字的替代方案，您可以使选择器更具体，
例如：
.left.background-none { background:none; }
（注意：类名之间没有空格）。
在这种情况下，当 .left 和 .background-none 都列在类属性中时（无论顺序或接近度如何），该规则将适用。
【讨论】：
如果您在其他类之后列出 bakground-none 类，则其属性将覆盖已设置的属性。此处无需使用!important。
例如：
.red { background-color: red; }
.background-none { background: none; }
和
<a class="red background-none" href="#carousel">...</a>
链接不会有红色背景。请注意，这只会覆盖选择器不太具体或同样具体的属性。
【讨论】：
LIFO 是浏览器解析 CSS 属性的方式。如果您使用 Sass，请声明一个名为
的变量"$header-background: 红色;"
使用它而不是直接分配像红色或蓝色这样的值。 当您想要覆盖时，只需将值重新分配给
"$header-background:蓝色"
然后
背景颜色:$header-background;
它应该顺利覆盖。使用“！important”并不总是正确的选择。它只是一个修补程序
【讨论】：