如何覆盖！重要？

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

td {height: 100px !important}

有什么办法可以覆盖这个吗？

覆盖！important修饰符

1. 只需使用添加另一个CSS规则!important，并赋予选择器更高的特异性（向选择器添加其他标签，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覆盖它的选项。

但是，有时需要知道如何覆盖它很有用。

在!important当您在样式表冲突的有选择，才应使用特异性。

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

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

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

免责声明：不惜一切代价避免！important。

这是一个肮脏的，肮脏的hack，但是您可以通过在要覆盖其重要内容的属性上使用（无限循环或持续时间很长的）动画来覆盖！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>

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

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

#P1 .Page {height:100px;}

比以下更重要：

.Page {height:100px;}

因此，在使用重要功能时，最好仅在真正需要时才使用它。因此，要覆盖细节，使样式更具体，但也要覆盖。见下文：

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

我希望这有帮助！！！

使用JavaScript覆盖

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

为我工作。

这也可以帮助

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

这将覆盖任何内联样式

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

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

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