HTML：

This is a text

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：

This is a text

但是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以这种方式工作的规则是什么？

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

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