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 1}}超过{{1}}

Answer 3

某些样式指南建议使用字母顺序排列CSS样式。这有助于避免从重复的属性定义中产生错误。

Answer 4

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

background-color will be #eee ......应该照顾这种情况......对于其他情况，订单无关紧要。

对于具有一组值及其简单子属性的复杂属性 - 您应该谨慎行事：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的回答。）