!important

對層疊的影響

當涉及重要宣告時，層疊源和層級順序是反轉的。如果沒有重要標誌，作者樣式表中的宣告會覆蓋使用者樣式表中的宣告，而使用者樣式表中的宣告又會覆蓋使用者代理預設樣式表中的宣告。

當宣告為重要時，優先順序順序是反轉的。使用者代理樣式表中標記為重要的宣告會覆蓋使用者樣式表中所有重要的宣告。類似地，使用者樣式表中所有重要的宣告會覆蓋作者樣式表中所有重要的宣告。最後，所有重要的宣告都優先於所有動畫。

反轉重要宣告的優先順序順序，確保有特殊需求的使用者（例如個性化配色方案或大字型）可以透過在使用者樣式表中將某些宣告標記為重要，從而在需要時覆蓋作者樣式。它還保證惡意擴充套件無法覆蓋重要的使用者代理樣式，這可能會破壞功能或對安全性產生負面影響。

有什麼比重要宣告優先順序更高嗎？有，過渡。CSS 過渡是一種控制屬性從一個值變為另一個值的速度的方法。在從一個值過渡到另一個值的過程中，屬性不會匹配特定的重要宣告。

a {
  color: red !important;
  background-color: yellow;
  transition: all 2s linear;
}
a:hover {
  color: blue !important;
  background-color: orange !important;
}

在此示例中，color 和 background-color 屬性將在兩秒內過渡到懸停狀態。儘管預設狀態是普通宣告，懸停狀態是 !important 宣告，但過渡確實會發生。

層疊層

在樣式表的三個來源（作者、使用者和使用者代理）中，未分層樣式中的普通宣告會覆蓋分層樣式宣告，其中最後宣告的優先順序高於其之前宣告的層。重要宣告會反轉優先順序順序：第一層中的重要宣告優先於下一層中的重要宣告，依此類推。此外，所有重要宣告都優先於任何層外部的重要宣告。

內聯樣式

內聯樣式是使用 style 屬性定義的樣式。它們可以是普通樣式，也可以是重要樣式。內聯 普通 樣式優先於所有 普通 宣告，無論來源如何。內聯 重要 樣式優先於所有其他 重要 作者樣式，無論層級如何，但來自使用者或使用者代理樣式表的重要樣式和過渡會覆蓋它們。

!important 和特異性

雖然 !important 不屬於特異性確定的一部分，但它與之相關。重要宣告會覆蓋來自相同來源和層疊層的所有其他宣告。

#myElement#myElement#myElement .myClass.myClass p:hover {
  color: blue;
}

p {
  color: red !important;
}

此示例顯示了一個選擇器過度指定的情況。無論選擇器特異性匹配普通宣告的程度有多高，來自相同來源和層疊層的重要宣告始終具有優先順序。在這種情況下，段落將始終是紅色。

當來自相同來源和層的兩個重要宣告應用於同一元素時，瀏覽器會選擇並使用特異性最高的宣告。

#myElement p {
  color: green !important;
}

p {
  color: purple !important;
}

在這種情況下，選擇器特異性很重要。只有當選擇器具有相同的特異性時，源順序才重要。

對簡寫屬性的影響

使用 !important 宣告簡寫屬性會將所有子屬性都設定為重要。以下兩個選擇器樣式塊是等效的

p {
  background: blue !important;
}

p {
  background-image: none !important;
  background-position: 0 0 !important;
  background-size: auto auto !important;
  background-repeat: repeat !important;
  background-origin: padding-box !important;
  background-clip: border-box !important;
  background-attachment: scroll !important;
  background-color: blue !important;
}

此示例說明了通常建議避免使用重要標誌的幾個原因之一。

對自定義屬性的影響

當 !important 標誌新增到自定義屬性值宣告中時，它會使值賦值變得重要。然後，!important 標誌會從自定義屬性值中剝離。!important 標誌不會作為自定義屬性值的一部分傳遞給 var() 函式。

:root {
  --my-color: red !important;
  --my-color: blue;
}
p {
  color: var(--my-color);
}
blockquote {
  color: var(--my-color);
  color: purple;
}

<p>This is a paragraph</p>
<blockquote>This is a blockquote</blockquote>

在此示例中，段落將是紅色，而不是藍色，因為自定義屬性值賦值是重要的。引用塊將是紫色，因為紫色的普通宣告在紅色的普通宣告之後。

最佳實踐

避免使用 !important 來覆蓋特異性。當有意為 UI 需求建立重要宣告時，請在 CSS 程式碼中註釋，向維護者解釋為什麼他們不應該覆蓋該功能。

即使在嘗試覆蓋不受您控制的高特異性樣式時，例如使用ID 選擇器宣告的第三方外掛中的樣式，您也無需使用 !important。可以考慮將第三方樣式表指令碼作為您的第一個層疊層匯入到命名或匿名層中，而不是使用 !important。只要外部樣式不包含重要宣告，您的樣式將優先於小部件樣式，無論特異性如何。

如果您需要覆蓋包含重要宣告的外部樣式表，請建立一個包含所需覆蓋的層疊層，並首先宣告該層。

可訪問性考慮

使用者樣式表中的重要樣式優先於作者樣式表中的重要宣告，這意味著向網站樣式新增 !important 標誌不會阻止有特殊要求的個人使用者（例如大字型）透過在自己的使用者樣式表中新增重要樣式來覆蓋您的樣式。

瀏覽器相容性

所有瀏覽器都支援此功能。

另見

• CSS 特異性
• CSS 層疊