css - 为什么 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。但只有来自 class_1 的规则被应用。我写过 <div class="class_1 class_2">我希望规则来自 class_1将被应用，然后它们将被 class_2 更改.

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

Answer 1

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

这意味着在第二个示例中，首先应用 .class_2 的规则，然后是 .class_1 的规则。因此，当两个 block 中都定义了任何属性时，当两个类都出现在一个元素上时，第二个 block 中的规则将取代第一个 block 中的规则。

因此，来自两个区 block 的规则都被应用了! (将 color 属性添加到 .class_2 block 以向您自己证明这一点。)但是，在应用 .class_2 block 之后， .class_1 block 是——它还定义了一个 font-size 属性，取代了 .class_2 中定义的相同属性。