为什么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的{​​{1}}和来自class_1的{​​{1}}。就像我一样 了解font-size中的class_2规则取代了font-size规则 来自class_2。

以下是示例2（jsfiddle）。

它有相同的html：

font-size

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

class_1

此代码无法正常工作。我把它作为exacly工作 示例1.但只应用<div class="class_1 class_2"> This is a text </div> 中的规则。我写的 .class_2 { font-size: 2em; } .class_1 { font-size: 1em; color: blue; } 我希望来自class_1的规则 将被应用，然后它们将被<div class="class_1 class_2">更改。

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

Answer 1

对于具有相同特异性的选择器，规则按照它们出现在 CSS文件中的顺序应用（或文件，如果有多个）。 <{1}}属性中给出的CSS类的顺序无关紧要。

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

所以，两个块的规则都是应用的！ （向.class_1块添加color属性以向您自己证明这一点。）但是，在应用.class_2块后，.class_2块是 - 而且它也是定义.class_1属性，取代font-size中定义的相同属性。