Html 何时在 CSS 中使用 !important 属性

When to use the !important property in CSS

提问by Denish

Consider:

考虑：

#div p {
    color: red !important;
}
...
#div p {
    color: blue;
}

I understand how !importantworks. In this case the div will render red because now it has priority (!important). But I can't still figure out an appropriate situation to use it in. Is there an example where !importantsaves the day?

我了解!important工作原理。在这种情况下，div 将呈现红色，因为它现在具有优先级 ( !important)。但我仍然无法找出使用它的适当情况。有没有一个!important可以节省一天的例子？

采纳答案by Robert Koritnik

This is the real life scenario

这是真实的生活场景

Imagine this scenario

想象一下这个场景

1. You have a global CSS file that sets visual aspects of your site globally.
2. You (or others) use inline styles on elements themselves which is usuallyvery bad practice.

1. 您有一个全局 CSS 文件，可以全局设置站点的视觉方面。
2. 您（或其他人）在元素本身上使用内联样式，这通常是非常糟糕的做法。

In this case you could set certain styles in your global CSS file as important, thus overriding inline styles set directly on elements.

在这种情况下，您可以将全局 CSS 文件中的某些样式设置为重要，从而覆盖直接在元素上设置的内联样式。

Actual real world example?

真实世界的例子？

This kind of scenario usually happens when you don't have total control over your HTML. Think of solutions in SharePointfor instance. You'd like your part to be globally defined (styled), but some inline styles you can't control are present. !importantmakes such situations easier to deal with.

当您无法完全控制 HTML 时，通常会发生这种情况。以SharePoint 中的解决方案为例。您希望您的部分被全局定义（样式化），但存在一些您无法控制的内联样式。!important使此类情况更容易处理。

Other real life scenarios would also include some badly written jQuery pluginsthat also use inline styles...

其他现实生活场景还包括一些写得很糟糕的jQuery 插件，这些插件也使用了内联样式......

I suppose you got the idea by nowand can come up with some others as well.

我想你现在已经有了这个想法，也可以想出一些其他的想法。

When do you decide to use !important?

你什么时候决定使用!important？

I suggest you don't use !importantunless you can't do it any other way. Whenever it's possible to avoid it, avoid it. Using lots of !importantstyles will make maintenance a bit harder, because you break the natural cascadingin your stylesheets.

我建议你不要使用，!important除非你不能以任何其他方式做到这一点。只要有可能避免它，就避免它。使用大量!important样式会使维护变得有点困难，因为您破坏了样式表中的自然级联。

回答by Jason

Overwriting the Style Attribute

覆盖样式属性

Say in the example that you are unable to change the HTML source code but only provide a stylesheet. Some thoughtless person has slapped on a style directly on the element (boo!)

在示例中假设您无法更改 HTML 源代码，而只能提供样式表。一些粗心大意的人直接在元素上打了一个风格（嘘！）

       div { background-color: green !important }

    <div style="background-color:red">
    <p>Take that!</p>
    </div>

Here, !important can override inline CSS.

在这里， !important 可以覆盖内联 CSS。

回答by thirtydot

This is a real, real lifescenario, because it actually happened yesterday:

这是一个真实的、真实的生活场景，因为它确实发生在昨天：

• Z-index in jQuery dialog. Autosuggest list not displayed properly

• jQuery 对话框中的 Z-index。自动建议列表未正确显示

Alternatives to not using !importantin my answer included:

!important在我的答案中不使用的替代方法包括：

• Hunting down in JavaScript/CSS where a certain elusive property was being applied.
• Adding the property with JavaScript, which is little better than using !important.

• 在 JavaScript/CSS 中寻找应用了某个难以捉摸的属性的地方。
• 使用 JavaScript 添加属性，这比使用!important.

So, a benefit of !importantis that it sometimes saves time. If you use it very sparingly like this, it can be a useful tool.

因此，它的一个好处!important是有时可以节省时间。如果你像这样非常谨慎地使用它，它可能是一个有用的工具。

If you're using it just because you don't understand how specificity works, you're doing it wrong.

如果您只是因为不了解特异性如何工作而使用它，那么您就做错了。

---

---

Another use for !importantis when you're writing some kind of external widget type thing, and you want to be sure that your styles will be the ones applied, see:

另一个用途!important是当您编写某种外部小部件类型的东西时，并且您想确保您的样式将是应用的样式，请参阅：

• Appended control's CSS

• 附加控件的 CSS

回答by Will Dean

You generally use !important when you've run out of other ways to increase the specificity of a CSS selector.

当您没有其他方法来增加 CSS 选择器的特异性时，您通常会使用 !important。

So once another CSS rule has already dabbled with Ids, inheritance paths and class names, when you need to override that rule then you need to use 'important'.

因此，一旦另一个 CSS 规则已经涉及 Id、继承路径和类名，当您需要覆盖该规则时，您就需要使用“重要”。

回答by pleasedontbelong

I have to use !importantwhen I need to overwrite the style of an HTML generated by some JavaScript "plugin" (like advertising, banners, and stuff) that uses the "style" attribute.

我必须使用!important，当我需要覆盖使用的“风格”属性的一些JavaScript“插件”生成的HTML（如广告，横幅，和东西）的风格。

So I guess that you can use it when you don't control the CSS.

所以我猜你可以在不控制CSS的情况下使用它。

回答by Phil.Wheeler

Strictly speaking you shouldn't need to use !important if you've structured your CSS well and don't have too many degrees of specificity.

严格来说，如果您的 CSS 结构良好并且没有太多的特殊性，则不需要使用 !important。

The most appropriate time to use !important is when you have one exceptional style that you want to style outside of your site's normal cascade.

最适合使用 !important 的时间是当您有一种特殊的样式想要在站点的正常级联之外进行样式设置。

回答by Highstaker

Using !importantis generally not a good idea in the code itself, but it can be useful in various overrides.

!important在代码本身中使用通常不是一个好主意，但它在各种覆盖中很有用。

I use Firefox and a dotjs plugin which essentially can run your own custom JS or CSS code on specified websites automatically.

我使用 Firefox 和一个 dotjs 插件，它基本上可以在指定的网站上自动运行您自己的自定义 JS 或 CSS 代码。

Here's the code for it I use on Twitter that makes the tweet input field always stay on my screen no matter how far I scroll, and for the hyperlinks to always remain the same color.

这是我在 Twitter 上使用的代码，它使推文输入字段始终保留在我的屏幕上，无论我滚动多远，并且超链接始终保持相同的颜色。

a, a * {
  color: rgb(34, 136, 85) !important;  
}

.count-inner {
 color: white !important;   
}

.timeline-tweet-box {
 z-index: 99 !important;
position: fixed !important;
left: 5% !important;   
}

Since, thankfully, Twitter developers don't use !importantproperties much, I can use it to guarantee that the specified styles will be definitely overridden, because without !importantthey were not overridden sometimes. It really came in handy for me there.

幸运的是，Twitter 开发人员很少使用!important属性，我可以用它来保证指定的样式肯定会被覆盖，因为没有!important它们有时不会被覆盖。在那里对我来说真的很方便。

回答by Quentin

!importantis somewhat like eval. It isn't a good solution to any problem, and there are very few problems that can't be solved without it.

!important有点像eval。它不是解决任何问题的好方法，而且很少有问题没有它是无法解决的。

回答by user2968592

I am planning to use !importantfor a third-party widget meant to be embedded in a large number of websites out of my control.

我计划!important用于第三方小部件，该小部件旨在嵌入到我无法控制的大量网站中。

I reached the conclusion !importantis the only solution to protect the widget's stylesheet from the host stylesheet (apart from iframe and inline styles, which are equally bad). For instance, WordPress uses:

我得出的结论!important是保护小部件的样式表不受宿主样式表影响的唯一解决方案（除了 iframe 和内联样式，它们同样糟糕）。例如，WordPress 使用：

#left-area ul {
    list-style-type: disc;
    padding: 0 0 23px 16px;
    line-height: 26px;
}

This rule threathens to override any UL in my widget because id's have strong specificity. In that case, systematic use of !importantseems to be one of the few solutions.

此规则威胁要覆盖我的小部件中的任何 UL，因为 id 具有很强的特异性。在这种情况下，系统地使用!important似乎是为数不多的解决方案之一。

回答by Chandan Reddy

This is a real-world example.

这是一个真实世界的例子。

While working with GWT-Bootstrap V2, it will inject some CSS file, which will override my CSS styles. In order to make my properties to be not overridden, I used !important.

在使用 GWT-Bootstrap V2 时，它会注入一些 CSS 文件，这些文件将覆盖我的 CSS 样式。为了使我的属性不被覆盖，我使用了!important.