这对性能有害吗？

Question

考虑以下示例：

规则的顺序。

.div-3 {float:right}
.div-4 {width:100%}
.div-2 {width:50%}
#div-1 {width:30%}

浏览器在乎吗？

<div id="div-1"></div>

<div class="div-2"></div>

<div class="div-3"></div>

<div class="div-4"></div>

保留原文。

Answer 1

不，CSS规则集的顺序不应影响性能。

浏览器不能假设每个选择器只匹配一个元素，它将跟随前一个选择器匹配的元素。

浏览器首先加载所有CSS，然后，对于每个元素，它们搜索哪些选择器匹配它。所有可能与之匹配的选择器都会根据样式表中的顺序进行检查。否则样式将不适用。

基本上CSS声明的顺序才有意义，因为当具有特定性和重要性时，最新的将赢得级联。