層疊樣式表/重要
important 關鍵字使宣告優先於普通宣告 - 沒有被標記為 important 關鍵字的宣告。因此 "p { color: red ! important }" 優先於 "p { color: green }"。
重要宣告的語法是
- 屬性：值 ! 重要
規則的相對重要性也取決於其來源：是來自文件作者、使用者或使用者代理指定的樣式表。
從不重要到最重要的宣告順序
- 使用者代理宣告
- 使用者普通宣告
- 作者普通宣告
- 作者重要宣告
- 使用者重要宣告
使用者重要宣告優先於其他所有宣告。這允許使用者覆蓋頁面設計者的演示，以滿足他們的需求。例如，使用者可以覆蓋文字顏色，使其在黑色背景上以大字型顯示為黃色，以使文字更容易閱讀。
確定來自一個或多個樣式表中的哪個規則適用於給定元素的過程稱為級聯，因此得名層疊樣式表。
用於此示例的 HTML 文件是
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>'!important' CSS declarations</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Paragraph 1.</p>
<p id="para2">Paragraph 2.</p>
<p>Paragraph 3.</p>
</body>
</html>
該文件使用樣式表 style.css 進行樣式設定
p {
background-color:#fff ;
color:#000 ! important
}
#para2 {
background-color:#fc9 ;
color:#00f ;
border:1px solid black
}
p {
background-color:#9cf ;
color:#f00
}
這三段將如何呈現？
考慮第一個段落元素 (
段落 1。
).
第一個和第三個選擇器 (p 選擇器) 與元素匹配。第二個選擇器 (#para2) 與元素不匹配。與元素匹配的兩個選擇器的規則將應用於元素。這些規則按它們在原始碼中出現的順序列出，如下所示：
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性* | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序** |
|
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 1 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 6 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 7 |
- * 重要性的等級範圍從 1（最不重要）到 5（最重要）。本頁的後續示例顯示了其他等級。
- ** 原始碼順序列是宣告在檔案中的位置，例如
background-color:#9cf是檔案中的第六個宣告。
應用於元素的規則按屬性排序。對於每個屬性，規則按重要性升序排序，然後按特異性（樣式屬性、ID 選擇器、類選擇器、元素選擇器）排序，然後按原始碼順序排序。來自排序列表的最後一個屬性值獲勝（即最重要的、最具體的規則的值）。
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性 | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序 |
|
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 1 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 6 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 7 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2 |
- 使用的宣告將以粗體顯示，以及決定規則之間勝負的獲勝者。
background-color 設定為 #9cf（淺藍色）。background-color 屬性的兩個規則具有相同的重要性以及特異性，因此第二個規則獲勝，因為它在原始碼中出現較晚。
color 設定為 #000（黑色）。color 屬性的規則具有不同的重要性，因此最重要的規則獲勝。
第一段呈現為
段落 1。
考慮第二個段落元素 (
段落 2。
).
第一個和第三個選擇器 (p 選擇器) 與元素匹配。第二個選擇器 (#para2) 也與元素匹配。所有三個選擇器的規則都將應用於元素。這些規則按它們在原始碼中出現的順序列出，如下所示：
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性 | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序 |
|
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 1 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2 |
| 背景顏色 | #fc9 | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 3 |
| 顏色 | #00f | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 4 |
| 邊框 | 1px 實線 黑色 | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 5 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 6 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 7 |
排序規則得到
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性 | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序 |
|
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 1 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 6 |
| 背景顏色 | #fc9 | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 3 |
| 邊框 | 1px 實線 黑色 | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 5 |
| 顏色 | #00f | #para2 | 作者普通 (等級 3) |
0 | 1 | 0 | 0 | 4 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 7 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2 |
background-color 設定為 #fc9（淺橙色）。具有 ID 選擇器的規則具有比其他兩個規則更高的特異性，因此它獲勝。
border 屬性只有一個規則，因此它被設定為 1px 實線 黑色。
color 設定為 #000（黑色）。color 屬性的規則具有不同的重要性，因此最重要的規則獲勝。
第二段呈現為
段落 2。
第三段與第一段完全相同的選擇器匹配，因此應用了完全相同的值。
第三段呈現為
段落 3。
段落 1。
段落 2。
段落 3。
在此示例中，我們將研究當將以下使用者樣式表 user.css 與前一個示例中的樣式表結合使用時，文件的外觀如何改變。（有關如何設定使用者樣式表的更多資訊，請參閱章節 使用者樣式表。）
p {
color:#ff0 ! important ;
background-color:#808080 ;
font-family:cursive
}
考慮第一個段落元素。來自使用者樣式表的單個選擇器與元素匹配。來自 style.css 的第一個和第三個選擇器 (p 選擇器) 也與元素匹配。來自 style.css 的第二個選擇器 (#para2) 與元素不匹配。應用於元素的規則按它們在原始碼中出現的順序列出，如下所示：
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性* | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序** |
|
| 顏色 | #ff0 | p | 使用者重要 (等級 5) |
0 | 0 | 0 | 1 | 1:1 |
| 背景顏色 | #808080 | p | 使用者普通 (等級 2) |
0 | 0 | 0 | 1 | 1:2 |
| 字體系列 | 草書 | p | 使用者普通 (等級 2) |
0 | 0 | 0 | 1 | 1:3 |
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:1 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2:2 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:6 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:7 |
- * 重要性的等級範圍從 1（最不重要）到 5（最重要）。請注意，來自使用者樣式表的規則要麼是普通宣告的等級 2，要麼是重要宣告的等級 5。
- ** 原始碼順序列中的第一個數字給出包含規則的檔案的載入順序。在本例中，
user.css在style.css之前載入。第二個數字是宣告在檔案中的位置。例如background-color:#9cf是第二個檔案中的第六個宣告。
排序規則得到
| 宣告 | 選擇器 | 權重 | ||||||
|---|---|---|---|---|---|---|---|---|
| 特異性 | ||||||||
| 屬性 | 值 | 重要性* | 樣式屬性 |
ID 選擇器 |
類 選擇器 |
元素 選擇器 |
來源 順序** |
|
| 背景顏色 | #808080 | p | 使用者普通 (等級 2) |
0 | 0 | 0 | 1 | 1:2 |
| 背景顏色 | #fff | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:1 |
| 背景顏色 | #9cf | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:6 |
| 顏色 | #00f | p | 作者普通 (等級 3) |
0 | 0 | 0 | 1 | 2:7 |
| 顏色 | #000 | p | 作者重要 (等級 4) |
0 | 0 | 0 | 1 | 2:2 |
| 顏色 | #ff0 | p | 使用者重要 (等級 5) |
0 | 0 | 0 | 1 | 1:1 |
| 字體系列 | 草書 | p | 使用者普通 (等級 2) |
0 | 0 | 0 | 1 | 1:3 |
background-color 屬性有兩個具有相同最高重要性的規則。這兩個規則的特異性也相同，因此它們按原始碼順序拆分。背景顏色設定為作者的選擇，而不是使用者的選擇。
使用者樣式表中 color 的重要宣告具有此屬性的最高重要性，因此使用使用者的文字顏色選擇，而不是頁面作者的選擇。
font-family 只有一個規則，即使用者的規則，因此使用使用者的選擇。
段落呈現為
段落 1。
段落 2。
段落 3。
已知此錯誤發生在 Windows XP 上的 Internet Explorer 6.0 和 7.0 版本中；但是，8.0 版本不受影響。
Internet Explorer 處理!important存在一個 bug。如果在同一個程式碼塊中，一個重要聲明後面跟著一個針對同一屬性的普通宣告，Internet Explorer 會將兩個宣告都視為普通宣告。例如，在 IE v6.0 中，以下樣式表會錯誤地將段落渲染成黃底紅字。段落應該呈現為黑底白字，因為前兩個宣告都是重要的。
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
color: yellow
}
您可以透過在樣式表中新增一條額外的規則來驗證這些宣告是否恢復為普通宣告。
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
color: yellow
}
p {
color: green
}
在 IE v6.0 中，這將導致段落呈現為紅底綠字，表明所有color宣告都被視為普通宣告。
如果您從第一個程式碼塊中刪除第二個color宣告
p {
background-color: black ! important ;
color: white ! important;
background-color: red ;
}
p {
color: green
}
段落將變為紅底白字。這表明第一個程式碼塊中的color宣告現在被正確地視為重要宣告。
很多人建議利用這個 bug 來傳遞不同於其他瀏覽器的值給 Internet Explorer。如果您需要這樣做，一個更好的解決方案是使用條件註釋。