CSS 如何覆盖 !important？

How to override !important?

提问by user1444027

I have created a custom style sheet that overrides the original CSS for my Wordpress template. However, on my calendar page, the original CSS has the height of each table cell set with the !importantdeclaration:

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

td {height: 100px !important}

Is there some way I can override this?

有什么方法可以覆盖它吗？

回答by Matt Coughlin

Overriding the !important modifier

覆盖 !important 修饰符

1. Simply add another CSS rule with !important, and give the selector a higher specificity (adding an additional tag, id or class to the selector)
2. add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

1. 只需添加另一个 CSS 规则!important，并为选择器赋予更高的特异性（向选择器添加额外的标签、id 或类）
2. 在比现有规则更晚的位置添加具有相同选择器的 CSS 规则（在平局中，最后一个定义的获胜）。

Some examples with a higher specificity (first is highest/overrides, third is lowest):

一些具有更高特异性的示例（第一个是最高/覆盖，第三个是最低）：

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

Or add the same selector after the existing one:

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

td {height: 50px !important;}

Disclaimer:

免责声明：

It's almost never a good idea to use !important. This is bad engineering by the creators of the WordPress template. In viral fashion, it forces users of the template to add their own !importantmodifiers to override it, and it limits the options for overriding it via JavaScript.

使用!important. 这是 WordPress 模板创建者的糟糕工程。以病毒式传播方式，它强制模板的用户添加他们自己的!important修饰符来覆盖它，并限制了通过 JavaScript 覆盖它的选项。

But, it's useful to know howto override it, if you sometimes have to.

但是，如果有时必须，知道如何覆盖它很有用。

回答by Jasper de Vries

The !importantshould only be used when you have selectors in your style sheet with conflicting specificity.

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

But even when you have conflicting specificity, it is better to create a more specific selector for the exception. In your case it's better to have a classin your HTML which you can use to create a more specific selector which doesn't need the !importantrule.

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

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

I personally never use !importantin my style sheets. Remember that the C in CSS is for cascading. Using !importantwill break this.

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

回答by mariomc

Disclaimer: Avoid !important at all cost.

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

This is a dirty, dirty hack, but you can override an !important, without an !important, by using an (infinitely looping or very long lasting) animation on the property you're trying to override the importants on.

这是一个肮脏的、肮脏的黑客，但您可以通过在您尝试覆盖重要内容的属性上使用（无限循环或非常持久）动画来覆盖 !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>

回答by KM123

Okay here is a quick lesson about CSS Importance. I hope that the below helps!

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

First of all the every part of the styles name as a weighting, so the more elements you have that relate to that style the more important it is. For example

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

#P1 .Page {height:100px;}

is more important than:

比以下更重要：

.Page {height:100px;}

So when using important, ideally this should only ever be used, when really really needed. So to overide the decleration, make the style more specific, but also with an override. See below:

因此，当使用 important 时，最好只在真正需要时才使用它。因此，要覆盖 decleration，使样式更具体，但也要覆盖。见下文：

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

I hope this helps!!!

我希望这有帮助！！！

回答by Manish Shrivastava

Override using JavaScript

使用 JavaScript 覆盖

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

Worked for me.

为我工作。

Cheers!

干杯!

回答by DiChrist

This can help too

这也有帮助

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

This will override any inline style

这将覆盖任何内联样式

回答by pasquale

I any case, you can override "height" with max-height

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

回答by LizardKG

A couple of answers worked for me here. Thanks. One thing I should mention is that in my own experience, and probably in the experience of a big chunk of people looking here for an answer, I'm sure most people don't want to use !important, but they have to. I use Joomla CMS in a number of projects and template developers spray their codes with !important. It is very hard to work around their code and in the override file we end up using !important more times than we really want to.

几个答案在这里对我有用。谢谢。我应该提到的一件事是，根据我自己的经验，可能还有很多在这里寻找答案的人的经验，我相信大多数人不想使用 !important，但他们必须使用。我在许多项目中使用 Joomla CMS，模板开发人员用 !important 喷洒他们的代码。很难解决他们的代码，在覆盖文件中，我们最终使用 !important 的次数比我们真正想要的要多。

回答by IWI

I would like to add an answer to this that hasn't been mentioned, as I have tried all of the above to no avail. My specific situation is that I am using semantic-ui, which has built in !importantattributes on elements (extremely annoying). I tried everything to override it, only in the end did one thing work (using jquery). It is as follows:

我想为此添加一个尚未提及的答案，因为我已经尝试了上述所有方法均无济于事。我的具体情况是我使用了语义用户界面，它!important在元素上内置了属性（非常烦人）。我尝试了一切来覆盖它，最后只做了一件事（使用 jquery）。如下：

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