如何覆盖!重要?

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

td {height: 100px !important}

有什么办法能让我无视它吗?

567626 次浏览

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

但是,知道如何来覆盖它是有用的,如果你有时不得不这样做的话。

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

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

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

我个人从未在样式表中使用!important。记住,CSS中的C表示级联。使用!important将打破这个。

样式名称的每个部分都有权重,因此与该样式相关的元素越多,它就越重要。例如

#P1 .Page {height:100px;}

比:

.Page {height:100px;}

所以当使用important时,理想情况下,这个应该只在真正需要的时候使用。因此,要重写声明,使样式更具体,但也要使用重写。见下文:

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

使用JavaScript重写

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

为我工作。

这也有帮助

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

这将覆盖任何内联样式

我想补充一个没有提到的答案,因为我尝试了以上所有的方法都没有效果。我的具体情况是我使用语义ui,它在元素上内置了!important属性(非常讨厌)。我尝试了一切重写它,只有在最后做了一件事(使用jquery)。具体如下:

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

免责声明:无论如何都要避免!

这是一个肮脏的,肮脏的hack,但是你可以覆盖!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>

在任何情况下,你都可以用max-height覆盖height

你可以在选择器中使用更高的特异性。

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

我写了一个关于如何覆盖CSS的详细文章

我用:不找到了一个很酷的技巧。 如果以上方法对你没有帮助,那么试试这个:

.page-width:not(.anything) {


}

如果您试图重写在class. xml中定义的!important标记。只需在id标记中指定您的属性。id的优先级比class高。