什么时候该用!important?

首页 > 代码库 > 什么时候该用!important?

2024-08-08 17:31:42 246人阅读

在CSS裡面使用!important通常代表你這個人要麼懶惰，要麼自私或者是过于自信。

首先让那些不知道的人看一下，!important是这么一回事：

1 CSS2 p {3     color: red !important;}#thing {4     color: green;}5 HTML6 <p id="thing">Will be RED.</p>

这个段落将会是red的，尽管ID选择器的优先级更高。但是!important规则会覆盖掉它原本的样子

如果CSS滥用!important的话将会变成非常难维护。造成这种不幸的一般都是这种步骤：

为啥我的CSS文件不起作用啦！？
(接着就用绝招：!important)
OK,可以啦！

然后下一个同事就会来加上一些新的样式，他会试着去修改一些CSS样式，但是他每没有收到预想中的效果。最终他发现了是 !important搞的鬼。然后他就会去删掉这些!important，接着再加上他自己的样式使得效果体现出来。但是，祸不单行，按下葫芦浮起瓢，这边搞定了，那边会因为这次修改而样式错了，就这样陷入了恶性循环。

比较适合使用的情况: 实用的工具类

那么什么时候使用 !important比较好呢？在我看来，在有实际用途的类里使用是比较合适的。

比如有一批按钮。现在假设下你的网页上有一个.button 类。不论放在什么元素上面，你都想元素看起来像一个按钮：特定的字体，圆角，特定的背景颜色与边框。所以，你这么写：

CSS

1 .button {2    background: red; 3    color: white;4    padding: 3px;5    border-radius: 5px;6    border: 1px solid black;}7 HTML8 <a href="http://www.mamicode.com/#" class="button">Do Thing</a>

如果元素上面有一个更高级的选择器，有可能会出现下例的问题：

HTML

1 <section id="content">2    <p>  text text blah <a href="http://www.mamicode.com/#" class="button">Do Thing</a>  </p></section>3 #content a {4    border-bottom: 1px dotted blue;5 }

现在可以看到按钮会变成虚线的边框，这个不是你所希望的。可以在看一下效果fiddle.

我不认为这种是CSS本身的问题。但这里我们把一个按钮的样子弄糟糕了。

把你的按钮类变得不容易被覆盖，使用!important是一个好方法。