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

如果规则适用于同一元素的相同属性，则仅对订单有用。（在这种情况下，最后一条规则“胜出”。）在你的例子中，顺序没有区别。

Answer 3

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

如果你有风格：

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

标记：

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

然后div中的文字将显示为蓝色。如果切换规则的顺序，它将为红色。

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

3 个答案: