如何使用另一个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; }
前两个“胜”通过select者特异性; 第三个胜利!important ，钝器。
你也可以组织你的样式表，例如规则
.background-none { background: none; }
只要按顺序赢得胜利，即通过遵循另外一个同样“强大”的规则。 但是这样做会施加限制，并且要求您在重新组织样式表时要小心。
这些都是CSS级联的例子，这是一个至关重要但被广泛误解的概念。 它定义了解决样式表规则之间冲突的确切规则。
PS我用left和background-none因为他们在问题中使用。 它们是不应该使用的类名称的例子，因为它们反映了特定的渲染而不是结构或语义angular色。
只要使用!important是它将有助于覆盖
background:none !important;
看看这个： 当使用重要的是正确的select
作为important关键字的替代，您可以使select器更具体，例如：
.left.background-none { background:none; }
（注意：类名之间没有空格）。
在这种情况下，规则将适用于.left和.background-none都列在类属性（不pipe顺序或接近度）中。
如果在其他类之后列出bakground-none类，则其属性将覆盖已经设置的属性。 这里没有必要使用!important 。
例如：
.red { background-color: red; } .background-none { background: none; }
和
<a class="red background-none" href="#carousel">...</a>
链接不会有红色的背景。 请注意，这只会覆盖具有较less或相同特定select器的属性。
LIFO是浏览器分析CSS属性的方式。如果您使用Sass，则声明一个名为as的variables
“$ header-background：red;”
使用它而不是直接分配像红色或蓝色的值。 当你想覆盖只是重新分配的价值
“$头背景：蓝色”
然后
背景色：$头背景;
它应该顺利覆盖。 使用“！重要”并不总是正确的select..它只是一个修补程序
您应该通过增加样式的特性来重写。 增加特异性有不同的方法。 使用!important影响特定性，是一个不好的做法，因为它打破了你的样式表的自然级联。
从css-tricks.com下面的图将帮助您根据点结构为您的元素产生正确的特异性。 无论哪个特征有更高的分数，都会赢。 听起来像是一场游戏 – 不是吗？
在css-tricks.com上检查样本计算。 这将有助于你理解这个概念，只需要2分钟。
如果您想自己制作和/或比较不同的特性，请尝试使用特殊性计算器： https ： //specificity.keegan.st/或者您可以使用传统的纸/铅笔。
为了进一步阅读，请尝试MDN Web Docs 。
所有最好的不使用!important 。
