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

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

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

但是，即使您有冲突的专一性，最好为异常创建一个更专一的选择器。在你的情况下，最好在你的HTML中有一个类，你可以用它来创建一个不需要!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;}

这将覆盖任何内联样式

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

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

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

这是一个肮脏的，肮脏的hack，但是你可以覆盖!important，没有!important，通过在你试图覆盖important的属性上使用(无限循环或非常长时间的)动画。

@keyframes forceYellow { 从{ 背景颜色:黄色; ｝ , { 背景颜色:黄色; ｝ ｝ div { 宽度:100 px; 身高:100 px; 保证金:0自动; 背景:红色!重要; 动画:1s线性无限力黄色; ｝ < div > < / div >

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

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

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

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

我发现了一个很酷的技巧:不。 如果上面的方法对你没有帮助，那么试试这个:

.page-width:not(.anything) {

}

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