单个css文件中的规则顺序是否重要？

Question

单个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,或者是明确的:两者都不起作用？

#wrapper {
color: #CCC;
}

#c {
clear:both
}

#a {
float: right;
}

#b {
float: left;
}

Answer 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/以获取更多示例的更广泛描述.

请注意,由于示例中没有重叠,因此顺序并不重要.另一方面,如果你的风格相互矛盾,那么重量,特异性和顺序就是相关的.我假设你在问题中的例子相当简单.

Answer 2

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

如果你有这样的风格：

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

和标记：

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

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