css - CSS 属性有特定的顺序吗？

Question

例如，如果我写：

background-color: black;
color: white;

或者

color: white;
background-color: black;

两者之间有什么区别，我应该关心订单吗？

score 3 · Accepted Answer

不，您可以按任何顺序编写它们。如果同一选择器中有重复项，则最后一条规则获胜。

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

在处理多个选择器时，后面的规则将覆盖前面的规则，除非前面的选择器更具体。

例如，此代码会将您的所有段落变为绿色：

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

虽然这段代码会把你所有的段落都变成红色，因为第一个选择器更具体。

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

虽然选择器中规则的顺序可能无关紧要，但我会注意以可预测的顺序编写它们（例如，在调整大小规则之前的位置规则之前的着色规则之前）只是为了使您的 CSS 保持一致并且稍微更易于维护。

score 2 · Accepted Answer

在您的示例中没有区别，但是排序可能很重要，但仅在极少数情况下。

例如，有时通常会这样做：

display: block;
display: inline-block;

当样式在同一规则中时，解析器将始终从上到下进行解释。在这种情况下会inline-block覆盖block，因为该属性是同名的。

然而：

ul li{
  font-size: 14px;
}

ul{
  font-size: 12px;
}

在这种情况下，即使规则中的12px之后出现14px，列表项元素中的文本也会14px因为选择器的优先级ul li高于ul

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

对于具有一组值及其简单子属性的复杂属性 - 您应该谨慎行事：margin, padding, background......等等。

score 0 · Accepted Answer

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

.classname
{
  color:#000;
}

.classnameTwo
{
  color:#fff;
 }

示例 html。

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

score 0 · Accepted Answer

如果声明影响相同的属性，则声明的顺序很重要。通过级联规则，后者指定获胜，其他条件相同。

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

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

顺序很重要，因为两个声明都设置了font-weight（设置为不同的值）。同样，在

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

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

（这总结并扩展了我对这个问题的副本的回答。）

6 回答 6