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

【问题标题】：Why does the order of css selectors matter?为什么 css 选择器的顺序很重要？
【发布时间】：2014-08-17 16:23:17
【问题描述】：

这里是示例 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 的color 和来自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;
}

而且这段代码没有像我预期的那样工作。我希望它能够像示例 1. 但仅应用来自 class_1 的规则。我写过 <div class="class_1 class_2"> 我希望 class_1 的规则将被应用，然后它们将被class_2更改。

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

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

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

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

【讨论】：