CSS !important 規則

什么是 !important？

CSS 中的 !important 規則用于為屬性/值增加比普通樣式更高的優先級。

實際上，如果你使用了 !important 規則，它將覆蓋該元素上該特定屬性的所有先前樣式規則！

讓我們看一個例子：

實例

#myid {
  background-color: blue;
}
.myclass {
  background-color: gray;
}
p {
  background-color: red !important;
}

親自試一試

例子解釋

在上面的例子中，所有三個段落都將獲得紅色背景顏色，盡管 ID 選擇器和類選擇器具有更高的特異性。!important 規則覆蓋了這兩種情況下的 background-color 屬性。

關于 !important 的重要事項

覆蓋 !important 規則的唯一方法是在源代碼中包含另一個具有相同（或更高）特異性的聲明中的 !important 規則 - 這就是問題的開始！這會使 CSS 代碼變得混亂，調試也會變得困難，尤其是在你有大型樣式表的情況下！

這里我們創建了一個簡單的實例。當你查看 CSS 源代碼時，并不十分清楚哪種顏色被認為是最重要的：

實例

#myid {
  background-color: blue !important;
}
.myclass {
  background-color: gray !important;
}
p {
  background-color: red !important;
}

親自試一試

提示：了解 !important 規則是好的。你可能會在一些 CSS 源代碼中看到它。但是，除非你絕對必須使用它，否則不要使用它。

可能有一兩個合理使用 !important 的情況

一種使用 !important 的情況是，如果你必須覆蓋無法以其他方式覆蓋的樣式。這可能是因為你在使用內容管理系統（CMS）并且無法編輯 CSS 代碼。然后你可以設置一些自定義樣式來覆蓋某些 CMS 樣式。

另一種使用 !important 的情況是：假設你希望頁面上的所有按鈕都具有特殊的外觀。在這里，按鈕的樣式為灰色背景顏色、白色文本以及一些內邊距和邊框：

實例

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

親自試一試

如果我們將按鈕放在具有更高特異性的另一個元素中，按鈕的外觀有時會發生變化，并且屬性會發生沖突。以下是一個實例：

實例

.button {
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

親自試一試

為了“強制”所有按鈕無論何時都具有相同的外觀，我們可以將 !important 規則添加到按鈕的屬性中，如下所示：

實例

.button {
  background-color: #8c8c8c !important;
  color: white !important;
  padding: 5px !important;
  border: 1px solid black !important;
}
#myDiv a {
  color: red;
  background-color: yellow;
}

親自試一試