单个css文件中的规则顺序重要吗？答案

【问题标题】：Is the order of rules within a single css file important?单个css文件中的规则顺序重要吗？
【发布时间】：2009-10-21 23:01:33
【问题描述】：

单个 css 文件中规则的顺序是否有所不同？

<div id="wrapper>
    <div id="a>
        section a
    </div>
    <div id="b>
        section b
    </div>
    <div id="c>
        section c
    </div>
</div>

#c 的 div 规则是否需要低于 #a 和 #b，或者 clear:both 不起作用？

#wrapper {
color: #CCC;
}

#c {
clear:both
}

#a {
float: right;
}

#b {
float: left;
}

【问题讨论】：

标签： css

【解决方案1】：

顺序确实很重要。

见http://msdn.microsoft.com/en-us/library/aa342531%28VS.85%29.aspx#specf

部分引用：

3。按选择器的特异性排序：具有更高特异性的选择器会覆盖更通用的选择器。特异性是通过连接选择器中 (a) ID 属性、(b) 类和伪类属性以及 (c) 类型名称和伪元素的计数来计算的。

例如，以下每个选择器都可以应用于单个 LI 元素；但是，在发生冲突时，仅应用具有最高特异性的声明。

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */  
li            {}  /* a=0 b=0 c=1 -> specificity =   1 */  
ul li         {}  /* a=0 b=0 c=2 -> specificity =   2 */ 
li:first-line {}  /* a=0 b=0 c=2 -> specificity =   2 */
ul ol+li      {}  /* a=0 b=0 c=3 -> specificity =   3 */
li.class      {}  /* a=0 b=1 c=1 -> specificity =  11 */
li#id         {}  /* a=1 b=0 c=1 -> specificity = 101 */

4.按指定顺序排序：如果两个规则具有相同的权重和特异性，则最后解析的规则获胜。（请注意，使用@import 规则指定的样式表首先被解析。）如果有任何冲突，将使用稍后出现在样式表中的选择器。因此，链接伪类选择器应始终按以下顺序使用。

另请参阅http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ 以获得更广泛的描述和更多示例。

请注意，由于您的示例中没有重叠，因此顺序并不重要。另一方面，如果你有相互冲突的风格，那么重量、特异性和顺序就会是相关的。我认为您在问题中的示例相当简化。

【讨论】：

【解决方案2】：

仅当规则适用于同一元素的同一属性时，顺序才重要。（在这种情况下，最后一条规则“获胜”。）在您的示例中，顺序没有区别。

【讨论】：

【解决方案3】：

如果同样特定的规则适用于同一元素，则后者获胜。

如果你有这种风格：

.foo { color: red; }
.bar { color: blue; }

还有标记：

<div class="foo bar">Test</div>

然后 div 中的文本将变为蓝色。如果你切换规则的顺序，它会是红色的。

【讨论】：