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;
}
