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

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

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

---

如果对同一元素适用同样具体的规则，则后一个元素获胜

如果您有以下风格：

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

以及标记：

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

测试

---

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

顺序确实很重要

看

部分引用：

三,。按选择器的特异性排序：具有更高特异性的选择器将覆盖更通用的选择器。通过连接选择器中的（a）ID属性、（b）class和pseudo class属性以及（c）type name和pseudo元素的计数来计算特异性

例如，以下每个选择器都可以应用于单个LI元素；但是，在发生冲突的情况下，只有具有最高特殊性的声明才适用

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

有关更多示例的更广泛描述，请参见

---

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

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

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

*             {}  /* 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 */