什么时候在CSS中使用！important属性

Question

什么时候在CSS中使用！important属性考虑：#div p {     color: red !important;}...#div p {     color: blue;}我明白是怎么!important运作的。在这种情况下，div将呈现红色，因为它现在具有priority（!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

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

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

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

• 在JavaScript / CSS中进行搜索，其中应用了某些难以捉摸的属性。

• 使用JavaScript添加属性，这比使用更好!important。

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

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

---

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

• 附加控件的CSS