什么时候该用!important?

 

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

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

 

CSS
p {
    color: red !important;}#thing {
    color: green;}
HTML
<p id="thing">Will be RED.</p>

 

 

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

 

 

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

 

 

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

 

 

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

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

 

 

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

 

 

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

 

CSS

.button {
   background: red; 
   color: white;
   padding: 3px;
   border-radius: 5px;
   border: 1px solid black;}
HTML
<a href="#" class="button">Do Thing</a>

 

 

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

 

HTML

<section id="content">
   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p></section>
#content a {
   border-bottom: 1px dotted blue;
}

 

 

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

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

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

 

CSS

.button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;

   /* For good measure */     
   text-decoration: none      !important;}

 

其他补充？

如果你有其他情况觉得比较适合使用，我很乐意听你讲一下:-)