如何覆盖！重要？

Question

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

td {height: 100px !important}

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

Answer 1

除了覆盖由style 属性设置的样式外，!important 仅应在样式表中有选择器与specificity 冲突时使用。

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

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

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

Answer 2

您可以通过在选择器中上升来使用更高的特异性。

td {height: 100px !important}
/* higher precedence */
table td {height: 200px !important}

您可以查看detailed article on how to override css here。

Answer 3

在任何情况下，您都可以用max-height 覆盖height。

Answer 4

使用 JavaScript 覆盖

$('.mytable td').attr('style', 'display: none !important');

为我工作。

Answer 5

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

但是，如果您有时必须这样做，了解如何 覆盖它会很有用。

Answer 6

免责声明：不惜一切代价避免使用 !important。

这是一种肮脏、肮脏的技巧，但您可以通过在您尝试覆盖重要信息的属性上使用（无限循环或非常持久的）动画来覆盖 !important，而无需使用 !important。

@keyframes forceYellow {
  from {
    background-color: yellow;
  }
  to {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background: red !important;
  animation: 1s linear infinite forceYellow;
}

<div></div>

Answer 7

这也有帮助

td[style] {height: 50px !important;}

这将覆盖任何内联样式

Answer 8

我想添加一个尚未提及的答案，因为我已尝试上述所有方法均无济于事。我的具体情况是我使用的是semantic-ui，它在元素上内置了!important 属性（非常烦人）。我尝试了一切来覆盖它，最后只有一件事起作用（使用jquery）。如下：

$('.active').css('cssText', 'border-radius: 0px !important');

Answer 9

好的，这里是关于 CSS 重要性的快速课程。希望以下内容对您有所帮助！

首先，样式的每个部分都以权重命名，因此与该样式相关的元素越多，它就越重要。例如

#P1 .Page {height:100px;}

比：

.Page {height:100px;}

因此，当使用重要时，理想情况下，它应该只在真正需要时才使用。因此，要覆盖 decleration，使样式更具体，但也要带有覆盖。见下文：

td {width:100px !important;}
table tr td .override {width:150px !important;}

希望对你有帮助！！！