如何覆蓋！重要？

Question

我創建了一個自訂樣式表，它覆蓋了我的 WordPress 模板的原始 CSS。但是，在我的日曆頁面上，原始 CSS 使用 !important 聲明設定了每個表格單元格的高度：

td {height: 100px !important}

有什麼方法可以覆蓋這個嗎？

Answer 1

除了覆寫style 屬性設定的樣式之外，!important 僅當樣式表中的選擇器與特異性 。

但是，即使您的特異性存在衝突，最好為異常創建更具體的選擇器。對於您的情況，最好在 HTML 中包含一個 class，您可以使用它來建立不需要 !important 規則的更具體的選擇器。

td.a-semantic-class-name { height: 100px; }

我個人從未在樣式表中使用!important。請記住，CSS 中的 C 表示級聯。使用 !important 會打破這個。

Answer 2

覆蓋 !important 修飾符

1. 只需使用 !important 新增另一個 CSS 規則，並為選擇器提供更高的特異性（為選擇器新增額外的標籤、id 或類別）
2. 在現有規則之後添加具有相同選擇器的 CSS 規則（在平局中，最後定義的規則獲勝）。

一些具有更高特異性的範例（第一個是最高/覆蓋，第三個是最低）：

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

或在現有選擇器之後新增相同的選擇器：

td {height: 50px !important;}

免責聲明：

使用!important幾乎從來都不是一個好主意。這是 WordPress 模板創建者的糟糕工程。它以病毒式傳播的方式強制模板的使用者添加自己的 !important 修飾符來覆蓋它，並限制透過 JavaScript 覆蓋它的選項。

但是，如果有時需要的話，了解如何覆蓋它會很有用。