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

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

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

在这种情况下,colorin .class1和.class2都被声明为重要,但因为.class2是在.class1之后声明的,所以浏览器会以蓝色显示你的段落,因为它会覆盖声明的颜色.class1

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

唯一可以覆盖这一点的是内联式的!重要的,你可以在小提琴中看到.