是否有特定的CSS属性顺序？

Question

例如，如果我写的：

background-color: black; 
color: white; 

或

color: white; 
background-color: black; 

有两个，我应该关心的秩序之间有什么区别？

Answer 1

不可以。您可以按任意顺序书写。在同一选择器内重复的情况下，最后一条规则获胜。

p { 
    color:blue; 
    color:red; 
    color:green; /* Green wins */ 
} 

当处理多个选择器时，稍后的规则将覆盖较早的规则，除非较早的选择器更具体。

例如，该代码将关闭所有的段落绿色：

p { color:red; } 
/* ... */ 
p { color:green; } 

尽管此代码将关闭所有的段落红色，因为第一选择是更具体。

body p { color:red; } 
/* ... */ 
p { color:green; } 

虽然规则选择中的顺序可能并不重要，我会照顾（着色规则之前上浆规则之前位置的规则，例如）把它们写在可预知的顺序只是为了让你的CSS一致，保持稍微愉快一点。

Answer 2

在你的例子中没有区别，但订购可以重要，但只在极少数情况下。

例如，它有时是常见的事：

display: block; 
display: inline-block; 

解析器将始终从顶部到解释时，底部的样式是相同的规则。在这种情况下，inline-block将覆盖block，因为属性名称相同。

但是：

ul li{ 
    font-size: 14px; 
} 

ul{ 
    font-size: 12px; 
} 

在这种情况下，即使12px进来规则14px后，在列表项元素的文本将14px因为选择ul li超过ul

优先级较高的

Answer 3

一些风格指南建议使用alphabetizing CSS样式。这有助于避免重复属性定义产生的错误。

Answer 4

background: none no-repeat 0 0 #ccc; 
background-color: #eee; 

background-color will be #eee ......应该照顾这样的情况...对于其他情况下的顺序无关紧要。

具有一组值及其简单子属性复杂性 - 你应该仔细prceed：margin, padding, background ...等

Answer 5

只有时间顺序问题是覆盖与HTML父/子元素节点或多个类，如下所示。或者如Meagar所说，如果您有多个描述同一类的相同类型的属性。最后一个将占主导地位。所以文本颜色将是白色或#fff。

.classname 
{ 
    color:#000; 
} 

.classnameTwo 
{ 
    color:#fff; 
} 

示例html。

<div class="classname classnameTwo">Color text </div> 

Answer 6

声明的顺序在声明影响同一属性的程度上很重要。通过cascade rules，后者指定胜利，其他条件相同。

因此，在该示例中，由于声明会影响不同的属性，因此顺序没有影响。但例如在声明

font: 100% Calibri; font-weight: bold; 

的顺序是显著，因为双方的声明设置font-weight（为不同的值）。同样，在

background: white; backround-image: url(bg.png); 

该命令是重要的;如果顺序颠倒过来，将不会有背景图像，因为background速记设置了所有背景属性，包括background-image: none在这种情况下。

（此总结和扩大我的回答这个问题的一个duplicate）