非常通用的CSS结构

Question

我只能假设是一个非常普通的CSS问题...

让我们想象一下，我们有以下内容：

body{
 background-color:blue;
 color:white;
 padding:2px;
}

让我们也假设我们也有这个：

body{     
 color:white;
 background-color:blue;
 padding:2px;
}

牢记所有这些，CSS样式元素是否有任何特定的结构，方向或正确放置-相对于该元素样式的放置以及该样式应位于哪一行？

换一种说法，在这两个示例中是否有任何规定背景颜色的“标准”必须是第一个声明？还是元素样式的排列完全是任意的？

当我试图完全理解CSS时，我来到这里向CSS世界的那些大师提出这个看似微不足道的问题。它发生在我身上，我找不到关于CSS语法的任何文档-关于正确的书写形式。另外，在我看来，如果CSS代表级联样式表，那么如果HTML元素中的样式与页面/节/等的样式保持某种程度的一致性，则最好使用放置在HTML元素中/上的样式。 HTML，对吧？

我们将不胜感激！

Answer 1

CSS中没有什么要求单个声明中的样式可以按任何特定顺序排列。以某种方式组织它们很有意义，Mature的方法和其他方法一样好。 （我通常认为它是“创建元素，然后定位它”，这意味着我将他的1和2颠倒了。）

例外情况是，您为同一声明以多种方式指定同一样式。如果您看一下成体的第6项，他的意思是有些浏览器不会理解box-shadow，而会理解webkit-box-shadow。您应该进行设置，以便能够同时理解两者的浏览器使用box-shadow，并将其放在最后。如果您有两个同样具体的声明，则将使用最后一个遇到的声明。 （有关更多信息，请参见this。）

Answer 2

在这种情况下（明确的顺序）只能使用一种“标准”：您可以按字母顺序对属性进行排序，以帮助自己和另一种快速搜索。

或更抽象的：总体逻辑为“ 从一般到不太重要”。建议按以下顺序排列属性：

1. 该元素相对于其他元素的位置： position，left/right/top/bottom，float，clear，z-index。
2. 大小和填充： width，height，margin，padding ..
3. 边界，它部分地指代尺寸，可以添加到第一个。
4. 一般设计：list-style-type，overflow ..
5. 颜色，字体和样式设计：background，color，font ..
6. 无前缀的属性最后写入。 例： 首先：-webkit-box-shadow:0 0 100px 20px #000;，然后： box-shadow:0 0 100px 20px #000;。这是为了确保标准（最终）实施始终比临时浏览器实施更为重要。

Answer 3

在CSS中，文件是自下而上渲染的，因此将实现其他文件下方的文件。那是我能想到的唯一基于订单的规则。

但是，您可以使用“！important”覆盖一个使CSS文件中的准确性降低的元素。 （如果两种样式都具有“！important”，则较低的样式将再次优先。）

如果您有任何疑问，请告诉我。