如何使用另一个 CSS 类覆盖 CSS 类的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20954715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to override the properties of a CSS class using another CSS class
提问by user3075049
I am fairly new to CSS3 and I want to be able to do the following:
我对 CSS3 相当陌生，我希望能够执行以下操作：
When I add a class into a an element, it overrides the properties of another class used in this specific element.
当我将一个类添加到一个元素中时，它会覆盖这个特定元素中使用的另一个类的属性。
Let's say that I have
假设我有
<a class="left carousel-control" href="#carousel" data-slide="prev">
I want to be able to add a class called bakground-none, that will over override the default background in the class left.
我希望能够添加一个名为 的类bakground-none，它将覆盖类中的默认背景left。
Thanks!
谢谢！
回答by Jukka K. Korpela
There are different ways in which properties can be overridden. Assuming you have
有多种方法可以覆盖属性。假设你有
.left { background: blue }
e.g. any of the following would override it:
例如，以下任何一项都会覆盖它：
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.
前两个通过选择器特异性“获胜”；第三个赢了!important，一个钝器。
You could also organize your style sheets so that e.g. the rule
你也可以组织你的样式表，例如规则
.background-none { background: none; }
wins simply by order, i.e. by being afteran otherwise equally “powerful” rule. But this imposes restrictions and requires you to be careful in any reorganization of style sheets.
通过被夺只需顺序，即后否则同样“强大”的规则。但这会带来一些限制，并要求您在重新组织样式表时要小心。
These are all examples of the CSS Cascade, a crucial but widely misunderstood concept. It defines the exact rules for resolving conflicts between style sheet rules.
这些都是CSS Cascade 的例子，这是一个至关重要但被广泛误解的概念。它定义了解决样式表规则之间冲突的确切规则。
P.S. I used leftand background-noneas they were used in the question. They are examples of class names that should notbe used, since they reflect specific rendering and not structural or semantic roles.
PS我使用过left，background-none因为它们在问题中使用过。他们是应该的类名的例子不使用，因为它们反映的具体呈现，而不是结构性或语义角色。
回答by Pranav C Balan
Just use !importantit will help to override
只需使用!important它将有助于覆盖
background:none !important;
Take a look at this : when-using-important-is-the-right-choice
回答by Marc Audet
As an alternative to the importantkeyword, you could make the selector more specific,
for example:
作为important关键字的替代，您可以使选择器更具体，例如：
.left.background-none { background:none; }
(Note: no space between the class names).
（注意：类名之间没有空格）。
In this case, the rule will apply when both .leftand .background-noneare listed in the class attribute (regardless of the order or proximity).
在这种情况下，当.left和.background-none都列在类属性中时（无论顺序或接近程度如何），规则将适用。
回答by Usman
You should override by increasing Specificityof your styling. There are different ways of increasing the Specificity. Usage of !importantwhich effects specificity, is a bad practicebecause it breaks natural cascading in your style sheet.
您应该通过增加样式的特异性来覆盖。有多种增加特异性的方法。使用!importantwhich effects specificity 是一种不好的做法，因为它破坏了样式表中的自然级联。
Following diagram taken from css-tricks.comwill help you produce right specificity for your element based on a points structure. Whichever specificity has higher points, will win. Sounds like a game - doesn't it?
以下来自css-tricks.com 的图表将帮助您根据点结构为您的元素生成正确的特异性。哪个特异点高，谁就赢。听起来像个游戏 - 不是吗？
Checkout sample calculations here on css-tricks.com. This will help you understand the concept very well and it will only take 2 minutes.
在css-tricks.com上查看示例计算。这将帮助您很好地理解这个概念，只需 2 分钟。
If you then like to produce and/or compare different specificities by yourself, try this Specificity Calculator: https://specificity.keegan.st/or you can just use traditional paper/pencil.
如果您想自己生成和/或比较不同的特异性，请尝试使用此特异性计算器：https: //specificity.keegan.st/或者您可以只使用传统的纸/铅笔。
For further reading try MDN Web Docs.
如需进一步阅读，请尝试MDN Web Docs。
All the best for not using !important.
最好不要使用!important.
回答by Ruud
If you list the bakground-noneclass after the other classes, its properties will override those already set. There is no need to use !importanthere.
如果您bakground-none在其他类之后列出该类，则其属性将覆盖已设置的属性。这里没有必要使用!important。
For example:
例如：
.red { background-color: red; }
.background-none { background: none; }
and
和
<a class="red background-none" href="#carousel">...</a>
The link will not have a red background. Please note that this only overrides properties that have a selector that is less or equally specific.
该链接不会有红色背景。请注意，这只会覆盖具有不那么具体或同样具体的选择器的属性。
回答by Ignatius Andrew
LIFO is the way browser parses CSS properties..If you are using Sass declare a variable called as
LIFO 是浏览器解析 CSS 属性的方式..如果您使用 Sass 声明一个名为 as
"$header-background: red;"
“$header-背景：红色；”
use it instead of directly assigning values like red or blue. When you want to override just reassign the value to
使用它而不是直接分配红色或蓝色等值。当您想覆盖时，只需将值重新分配给
"$header-background:blue"
“$header-background:blue”
then
然后
background-color:$header-background;
背景色：$header-background;
it should smoothly override. Using "!important" is not always the right choice..Its just a hotfix
它应该顺利覆盖。使用 "!important" 并不总是正确的选择..它只是一个修补程序
