何时在CSS中使用！important属性

Question

考虑：

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

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

Answer 1

这是现实生活场景

想象一下这个场景

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

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

实际真实世界的例子？

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

其他现实生活场景还包括一些写得不好的 jQuery插件，它们也使用内联样式......

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

您何时决定使用!important？

我建议您不要使用!important，除非您不能以任何其他方式执行此操作。只要有可能避免它，请避免它。使用大量!important样式会使维护变得更难，因为你破坏了样式表中的自然级联。

Answer 2

覆盖样式属性

在示例中假设您无法更改HTML源代码但仅提供样式表。一些不加思索的人直接在元素上打了一个样式（嘘！）

       div { background-color: green !important }

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

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

Answer 3

这是真实，现实生活情景，因为它实际上是昨天发生的：

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

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

• 在JavaScript / CSS中搜寻一些难以捉摸的属性。
• 使用JavaScript添加属性，这比使用!important好一点。

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

如果你因为不理解specificity works的方式而使用它，那么你做错了。

---

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

• Appended control's CSS

Answer 4

当你用尽其他方法来增加CSS选择器的特异性时，你通常会使用！important。

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

Answer 5

当我需要覆盖使用“样式”属性的某些JavaScript“插件”（如广告，横幅和内容）生成的HTML样式时，我必须使用!important。

所以我猜你可以在不控制CSS时使用它。

Answer 6

严格地说，如果你很好地构建了CSS并且没有太多的特异性，那么你不应该使用！important。

最合适的使用时间！重要的是，如果您想要在网站正常级联之外设置一种特殊风格，那么这一点很重要。

Answer 7

!important有点像eval。对任何问题都不是一个好的解决方案，如果没有它，很少有问题无法解决。

Answer 8

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

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

这是我在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;   
}

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

Answer 9

这是一个真实的例子。

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

Answer 10

当内联!important是正确答案时，使用CSS在电子邮件创建中非常重要。它与@media结合使用，可在不同平台上查看时更改布局。例如，与智能手机相比，页面在桌面上的显示方式（即更改链接位置和大小。使整个页面适合480px宽度，与640px宽度相对应。

Answer 11

我使用!important更改SharePoint Web部件上元素的样式。构建Web部件上的元素的JavaScript代码隐藏在SharePoint内部工作的深层次。

试图找到样式的应用位置，然后尝试修改它似乎给我带来了很多浪费。在自定义CSS文件中使用!important标记要容易得多。

Answer 12

我打算将!important用于第三方小部件，这些小部件旨在嵌入我无法控制的大量网站中。

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

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

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

Answer 13

您使用!important覆盖css属性。

例如，您在ASP.NET中有一个控件，它呈现一个背景为蓝色的控件（在HTML中）。您想要更改它，并且您没有源控件，因此您附加一个新的CSS文件并编写相同的选择器并更改颜色，然后添加!important。

最佳做法是，当您对SharePoint网站进行品牌塑造/重新设计时，您会大量使用它来覆盖默认样式。