如何覆盖！重要？

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 覆盖它的选项。

但是，如果有时需要的话，了解如何覆盖它会很有用。