多个 CSS 类：根据定义的顺序重叠的属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3066356/
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
Multiple CSS Classes: Properties Overlapping based on the order defined
提问by nonopolarity
Is there a rule in CSS that determines the cascading order when multiple classes are defined on an element? (class="one two"vs class="two one")
当在一个元素上定义多个类时，CSS 中是否有确定级联顺序的规则？（class="one two"对比class="two one"）
Right now, there seems to be no such effect.
目前，似乎没有这种效果。
Example: both divs are orange in color on Firefox
示例：Firefox 上的两个 div 均为橙色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
</style>
</head>
<body>
<div class="one two">
hello world
</div>
<div class="two one">
hello world
</div>
回答by edl
It depends on which one is declared last in your stylesheet. For example,
这取决于在您的样式表中最后声明了哪一个。例如，
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
vs
对比
.two { border: 6px dashed green }
.one { border: 6px dashed orange }
回答by Nick Craver
The class definedlast in the CSSis what wins in these cases. The order on the element doesn't matter, this is consistent across all browsers that I'm aware of, I'll try and ind the relevant spec bits.
在这些情况下，在 CSS 中最后定义的类是赢家。元素上的顺序无关紧要，这在我所知道的所有浏览器中都是一致的，我将尝试查找相关的规范位。
The entireclass doesn't win, the properties individually win, if the .onehad a property that .twodidn't you would of course see that property on both of these <div>elements.
在整个类不赢，属性单独获胜，如果.one有这样的属性.two没有你当然会看到这两个的该属性<div>的元素。
回答by mdma
As the other answers have noted, the order declared in the class attribute has no effect - the priority comes from the order of declarations in the CSS file.
正如其他答案所指出的，在 class 属性中声明的顺序没有影响 - 优先级来自 CSS 文件中声明的顺序。
However, if you really want to mock up something that allows you to "fake" priority in the class attribute, you could try:
但是，如果你真的想模拟一些允许你在 class 属性中“伪造”优先级的东西，你可以尝试：
.one-first { border: 6px dashed green }
.two-first { border: 6px dashed orange }
.one { border: 6px dashed green }
.two { border: 6px dashed orange }
And then
进而
<div class="one-first two"/>
and
和
<div class="two-first one"/>
Will order the priority with the last one winning (in a similar vein to the CSS proprty that comes last taking priority.)
将排序最后一个获胜的优先级（与最后一个优先的 CSS 属性类似。）
回答by CARLOS LOTH
When using multiple classes for defining an element stylesheet you can use the !importantto override the "cascating" of stylesheet.
当使用多个类来定义元素样式表时，您可以使用!important来覆盖样式表的“级联”。
.one { border: 6px dashed green !important }
.two { border: 6px dashed orange }
It will make your divs green.
它会让你的 div 变绿。
回答by Ben Rowe
The order of the class attribute doesn't matter one bit. It depends on several things, in your case it's the order in which your css is written.
class 属性的顺序一点也不重要。这取决于几件事，在您的情况下，它是编写 css 的顺序。
Both styles have the same specificity, so the .two style overrides the style of .one because it's lower in the style tag.
两种样式都具有相同的特性，因此 .two 样式会覆盖 .one 的样式，因为它在 style 标签中较低。
回答by hobbs
I think it's clear that no such rule applies. The rule .onehas the same specificity as the rule .two, so according to the CSS standard the properties in the .twoblock override those in the .onebecause the .twoblock appears later. No reference is made anywhere to the order of the words in the classattribute.
我认为很明显没有这样的规则适用。规则.one与规则具有相同的特殊性.two，因此根据 CSS 标准，.two块中的属性会覆盖 中的属性，.one因为.two块稍后出现。在任何地方都没有提到class属性中单词的顺序。
回答by Laramie
When in doubt, view the page in FireBug. It will strike out the classes that are overridden and show the order which they are applied in the page.
如有疑问，请查看 FireBug 中的页面。它将删除被覆盖的类并显示它们在页面中的应用顺序。
Also note that inline styles will override those declared in an external stylesheet. If you want to break the cascading chain af applicability, you can use the !importantdeclaration as in
另请注意，内联样式将覆盖在外部样式表中声明的样式。如果你想打破级联链 af 适用性，你可以使用!important声明，如
p {margin: 10px 5px 0 10px !important}
This will cause the !importantdeclration to override others regardless of position. Some see it as bad practice, but it can come in handy if used judiciously.
这将导致!important声明覆盖其他声明，无论位置如何。有些人认为这是不好的做法，但如果使用得当，它会派上用场。
回答by Sonic Soul
the override will happen in the order in which the classes are declared. so .two always wins
覆盖将按照类的声明顺序发生。所以 .two 总是赢
