Question

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

td {height: 100px !important}

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

Answer 1

覆盖！important修饰符

只需添加另一个带有!important的CSS规则，并为选择器提供更高的特异性（向选择器添加额外的标记，id或类），或者在稍后添加具有相同选择器的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 2

只有当样式表中的选择器出现!important冲突时，才应使用specificity。

但即使你的特异性存在冲突，最好为异常创建一个更具体的选择器。在您的情况下，最好在HTML中使用class，您可以使用该!important创建一个不需要td.a-semantic-class-name { height: 100px; }规则的更具体的选择器。

!important

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

Answer 3

好的，这是关于CSS重要性的快速课程。我希望以下有帮助！

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

#P1 .Page {height:100px;}

比以下更重要：

.Page {height:100px;}

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

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

我希望这会有所帮助!!!

Answer 4

使用JavaScript覆盖

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

为我工作。

干杯！

Answer 5

免责声明：不惜一切代价避免重要。

这是一个肮脏，肮脏的黑客攻击，但你可以通过在你试图覆盖重要内容的属性上使用（无限循环或非常持久）动画来覆盖！important，而不是！important。 / p>

animation

@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;
}

Answer 6

这也有帮助

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

这将覆盖任何内联样式

Answer 7

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

Answer 8

这里有几个答案对我有用。谢谢。我应该提到的一件事是，根据我自己的经验，也许还有很多人在这里寻找答案的经验，我敢肯定大多数人都不想使用！important，但必须这样做。我在许多项目中使用Joomla CMS，并且模板开发人员使用！important喷洒代码。很难解决他们的代码，并且在覆盖文件中，使用！important的次数比实际所需的次数多。

Answer 9

我想补充一个未提及的答案，因为我已经尝试了以上所有内容但无济于事。我的具体情况是我使用的是semantic-ui，它在元素上内置了!important属性（非常烦人）。我尝试了一切来覆盖它，但最终只做了一件事（使用jquery）。它如下：

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

如何覆盖！重要？

9 个答案:

覆盖！important修饰符

声明：