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

单个css文件中的规则顺序是否有所不同？单个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; 
}

来源

2009-10-21 Jeff

在适用于相同元素的同样具体规则的情况下，后者胜出。

如果你有风格：

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

而且标记：

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

然后在div文本将变成蓝色。如果您切换规则的顺序，它将是红色的。

来源

2009-10-21 14:59:16

订单的确很重要。

见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.Sort按订单规定：如果两个规则具有相同的重量和特异性，最后一个解析胜。（请注意，使用@import规则指定的样式表首先被解析。）如果存在任何冲突，将使用样式表中稍后出现的选择器。出于这个原因，链接伪类选择器应始终按以下顺序使用。

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

请注意，由于您的示例中没有重叠，所以顺序并不重要。另一方面，如果你有不同的风格，那么权重，特异性和顺序将是相关的。我假设你在问题中的例子相当简单。

来源

2009-10-21 15:00:31

仅当规则适用于相同元素的相同属性时，顺序才重要。（在这种情况下，最后一条规则是“胜利”。）在你的例子中，顺序不会有任何区别。

来源

2009-10-21 15:01:33 Martha

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

回答

相关问题