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

这是示例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”>和
结果是class_1的颜色和class_2的font-size.就像我一样
了解它,class_2中的font-size规则取代了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;
}

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

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

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

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

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