2024-02-07 08:00:06

如何覆盖!重要?

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

td {height: 100px !important}

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


当前回答

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

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

其他回答

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

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

我在这里写了一篇关于如何重写CSS的详细文章。

使用JavaScript重写

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

为我工作。

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

重写!important修饰符

简单地添加另一个CSS规则!important,并赋予选择器更高的特异性(添加一个额外的标签,id或类到选择器) 在现有选择器之后添加具有相同选择器的CSS规则(平局时,最后定义的选择器获胜)。

一些具有更高特异性的例子(第一个是最高/覆盖,第三个是最低):

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

或者在现有的选择器之后添加相同的选择器:

td {height: 50px !important;}

免责声明:

使用!important几乎从来不是个好主意。这是WordPress模板创建者的拙劣工程。以病毒式传播的方式,它迫使模板的用户添加自己的重要修饰符来覆盖它,并且它限制了通过JavaScript覆盖它的选项。

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

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

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