何时在CSS中使用!important属性

Question

考虑:

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

我明白是怎么!important运作的.在这种情况下,div将呈现红色,因为它现在具有priority(!important).但我仍然无法找到适当的情况来使用它.是否有一个!important节省一天的例子？

Answer 1

这是现实生活中的情景

想象一下这个场景

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

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

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

我想你现在已经有了这个想法,也可以提出其他一些想法.

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

真实世界的例子 - 网站作者需要添加一种风格,知道如何去做,但是对于在页面上强制自己的风格的特异性还不够了解.他们可以去CSS开发人员为他们创建一个样式,或者如果它只是一次性的情况,他们可以添加一个页面上的`!important`声明. (5认同)
另一个真实世界的例子:您正在使用一个JavaScript Widget,它将一些内联样式注入DOM元素.覆盖内联样式的唯一机会是使用`!important`. (3认同)

Answer 2

在示例中说您无法更改HTML源代码但只提供样式表.一些不加思索的人直接在元素上打了一个样式(嘘!)

       div { background-color: green !important }

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

在这里,!important可以覆盖内联CSS.

Answer 3

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

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

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

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

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