这对性能有坏处吗？

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声明的顺序才是重要的，因为当在特异性和重要性方面存在抽签时，最新的声明将赢得级联。