是否有特定的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）