多个重要的类声明和优先级

Question

从理论上讲，如果您有这种情况：

<style type="text/css">
    .class1 {
        color:#F00 !important;
    }
    .class2 {
        color:#00F !important;
    }
</style>

<p class="class2 class1">Test</p>

哪种颜色应该优先？浏览器如何确定此方案中的优先级？

Answer 1

根据此消息来源：http://www.boogiejack.com/CSS_4.html

class2应该覆盖class1样式。

  

规格顺序：作为最后一个   度假，当所有其他冲突   分辨率规格不能   确定应该采用哪种风格   优先级，指定的最后一种样式   将是使用的风格。

Answer 2

使用两个同等加权的选择器，无论是将!important应用于两者还是从两者中省略它，行为都是相同的。

<style type="text/css">
    .class1 {
        color: #F00; /* red */
    }
    .class2 {
        color: #00F; /* blue */
    }
</style>

html类属性中的类的顺序与每个类选择器的特异性级别无关。

<p class="class2 class1">Test X</p>
<p class="class1 class2">Test Y</p>

输出

• 测试X→蓝色
• 测试Y→蓝色

如果你只在一个选择器类上使用!important，那么那个选择器类优先（因为它具有更高的特异性）。

Answer 3

由于类在添加到元素时都“同等重要”，因此将它们分配给段落的顺序无关紧要。

在这种情况下，color和.class1中的.class2都被声明为重要，但由于.class2是在.class1之后声明的，因此浏览器会将您的段落显示为蓝色，因为它从.class1

覆盖声明的颜色

另外，请看一下：http://jsfiddle.net/3uPXx/1/ 您可以看到在段落上声明类的顺序无关紧要。由于两个类都定义了相同的属性（color），因此它将被覆盖为最后声明的类。

唯一能够覆盖这一点的是内联式的！重要的，正如你在小提琴中看到的那样。