CSS 多个 !important 类声明和优先级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5473796/
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 !important class declarations and precedence
提问by Ben Dyer
Theoretically speaking, if you had this scenario:
从理论上讲，如果您遇到这种情况：
<style type="text/css">
.class1 {
color:#F00 !important;
}
.class2 {
color:#00F !important;
}
</style>
<p class="class2 class1">Test</p>
Which color should take precedence? How do browsers determine precedence in this scenario?
哪种颜色应该优先？在这种情况下，浏览器如何确定优先级？
回答by Jan_V
According to this source: http://www.boogieHyman.com/CSS_4.html
根据这个来源：http: //www.boogieHyman.com/CSS_4.html
class2 should override the class1 styling.
class2 应该覆盖 class1 样式。
Order of Specification: As a last resort, when all other conflict resolution specifications cannot determine which style should take precedence, the last style specified will be the style used.
规范顺序：作为最后的手段，当所有其他冲突解决规范无法确定应优先使用哪种样式时，最后指定的样式将是所使用的样式。
回答by smilyface
With two equally weighted selectors, the behavior is the same whether you apply !importantto both or omit it from both.
使用两个同等权重的选择器，无论您!important对两者都应用还是从两者中省略它，行为都是相同的。
<style type="text/css">
.class1 {
color: #F00; /* red */
}
.class2 {
color: #00F; /* blue */
}
</style>
The order of classes in the html class attribute is irrespective of each class selector's specificity level.
html class 属性中的类顺序与每个类选择器的特定级别无关。
<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>
Output
输出
- Test X → blue
- Test Y → blue
- 测试 X → 蓝色
- 测试 Y → 蓝色
If you use !importanton just one selector class, then that one will take precedence (because it takes on a higher level of specificity).
如果您!important只在一个选择器类上使用，那么该类将优先（因为它具有更高级别的特异性）。
回答by Tim
Since classes are all "equal important" when added to an element it doesn't matter in which order you assign them to your paragraph.
由于类在添加到元素时都“同等重要”，因此将它们分配给段落的顺序无关紧要。
In this case, colorin .class1and .class2are both declared as important, but because .class2 was declared after .class1 the browser will show your paragraph in blue, since it overwrites the declared color from .class1
在这种情况下，colorin.class1和.class2都被声明为重要的，但是因为 .class2 是在 .class1 之后声明的，浏览器将以蓝色显示您的段落，因为它会覆盖声明的颜色.class1
Also, have a look at this: http://jsfiddle.net/3uPXx/1/You can see it doesn't matter in which order you declare the class on your paragraph. Since both classes define the same attribute (color) it will be overwritten be the class which is declared last.
另外，看看这个：http: //jsfiddle.net/3uPXx/1/你可以看到在你的段落中声明类的顺序无关紧要。由于两个类定义了相同的属性 ( color)，它将被最后声明的类覆盖。
The only thing that can overwrite this is an inline-style with !important as you can see in the fiddle.
唯一可以覆盖它的是带有 !important 的内联样式，正如您在小提琴中看到的那样。
