为什么css选择器的顺序很重要？

Question

这是示例1(jsfiddle):

HTML:

<div class="class_1 class_2">
This is a text
</div>

CSS:

.class_1 {
    font-size: 1em;
    color: blue;
 }

.class_2 {
    font-size: 2em;
}

它的工作方式与我期望的方式相当.我有<div class="class_1 class_2">,结果color来自class_1和font-size来自class_2.据我所知,font-size规则class_2取代了font-size规则class_1.

这是示例2(jsfiddle).

它有相同的HTML:

<div class="class_1 class_2">
This is a text
</div>

但是css选择器的顺序是相反的:

.class_2 {
    font-size: 2em;
}

.class_1 {
    font-size: 1em;
    color: blue;
}

这段代码不能像我期望的那样工作.作为示例1,我将其作为exacly工作,但只class_1应用规则.我写过 <div class="class_1 class_2">,我希望class_1 将应用规则,然后它们将被改变class_2.

为什么会这样？使css以这种方式工作的规则是什么？

Answer 1

对于具有相同特异性的选择器,规则按照它们出现在CSS文件中的顺序(或文件,如果有多个)应用.HTML class属性中给出的CSS类的顺序是无关紧要的.

这意味着在第二个示例中,.class_2首先应用规则,然后应用规则.class_1.因此,当在两个块中定义任何属性时,当元素存在于元素上时,第二个块中的规则将取代第一个块中的规则.

所以,两个块的规则都适用了!(color向.class_2块中添加一个属性以向自己证明这一点.)但是,在.class_2应用块之后,.class_1块是 - 并且它还定义了一个font-size属性,取代了定义的相同属性.class_2.