如何覆盖！重要？

Question

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

 td {height: 100px !important}

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

原文由 user1444027 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

但是，如果您有时必须这样做，知道 如何 覆盖它是很有用的。

原文由 Matt Coughlin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

除了覆盖由 style 属性设置的样式外， !important 应该只在样式表中的选择器具有冲突的 特异性 时使用。

但即使您有冲突的特异性，也最好为异常创建一个更具体的选择器。在你的情况下，最好在你的 HTML 中有一个 class ，你可以用它来创建一个更具体的选择器，它不需要 !important 规则。

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

我个人从不在我的样式表中使用 !important 。请记住，CSS 中的 C 用于级联。使用 !important 将打破这一点。

原文由 Jasper de Vries 发布，翻译遵循 CC BY-SA 4.0 许可协议