css - 如何覆盖!重要？

Question

我已经为我的 Wordpress 模板创建了一个覆盖原始 CSS 的自定义样式表。但是，在我的日历页面上，原始 CSS 具有使用 !important 声明设置的每个表格单元格的高度:

td {height: 100px !important}

有什么方法可以覆盖它吗？

Answer 1

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

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