css !important的用法

css !important的用法

一、!important语法

选择器{样式:值!import;}

!important为开发者提供了一个增加样式权重的方法。应当注意的是!important是对整条样式的声明，包括这个样式的属性和属性值

二、!important实例

<style type="text/css">...
<!--将!important去掉试试效果-->
a{...}{color:green!important;}
#main a{...}{ color:blue;}
</style>

 
<li id="main">
<a>!important实例</a>
</li>


		

对于上面的代码，如果不加important特性，则超链接的颜色为蓝色，但是加上important之后优先级提高了，显示颜色为绿色。
 

2、

<style>...
#Box li{...}{
     color:red;
}
.important_false{...}{
     color:blue;
}
important_true{...}{
     color:blue !important;
}
</style>


<li id="Box">
    <li class="important_false">这一行末使用important</li>
    <li class="important_true">这一行使用了important</li>
</li>

		

CSS代码第一行设定了box里面所有li中字体色为红色，第二行和第三行都用class重新定义了自身li的字体色为蓝色，不同的是，第二行末使用important，而第三行使用了！

默认情况下，class的优先级小于id，所以，第二行中即使用class重定义了自身样式，也无法生效，所以继承父级属性，这行字还是红色！

但是，第三行中，用了important提升优先级（或看成强制重定义），所以这里的css得以生效，这行字变为了蓝色！

三、!important应该注意的一些地方

1、如果!important被用于一个简写的样式属性，那么这条简写的样式属性所代表的子属性都会被作用上!important。

2、关键字!important必须放在一行样式的末尾并且要放在该行分号前，否则就没有效果。 （不过分号前的空格不会影响它）

3、如果因为一些特殊原因，你不得不在一个代码块中声明两个同样的属性，那么请把!important加在第一个属性后面，因为这样做会让所有浏览器中第一个属性的权重更大，而IE6除外（这是一个只有IE6才有的hack，但是不会影响你的CSS）

四、何时该使用!important

1、帮助测试可访问性

正如前面提到过的，用户样式中可以包含!important声明，允许用户根据自己的特殊需求来给具体的CSS样式增加权重以帮助他们阅读和访问内容。

有特殊需求的用户可以把!important加到像font-size这样的打印属性上来加大字体，或者为了提高网页的对比度而把它加到与颜色相关的样式上。

2、暂时解决紧急问题

总会有这样的情况发生——某个客户的线上网站出现了CSS的bug，你必须快速修复。在大多数情况下你应该会用Firebug或者其他的开发者工具来调试你的CSS代码并且最终修复它。但是，如果这个bug发生在IE6或者是其他没有提供调试工具的浏览器上的时候，你可能需要使用!important来完成快速修复。

当你用这个临时修复的办法让网站继续上线以后（这样可以先摆平客户），你再花些时间用不破坏层叠且可维护性高的方法来修复这个bug也为时未晚。当你找到更好的解决方案你就可以替换掉线上的!important部分，而且客户对此毫不知情。

3、用Firebug或者其他开发者工具覆写样式

我们可以使用Firebug或者Chrome开发者工具（译注：两者均可用F12唤出）查看页面元素，在不影响真正的CSS样式的情况下可以自由地编辑样式，测试效果，调试bug等等。

!important可以被加在单行样式的后面从而让已经被覆盖的样式重新作用。这样的话，你不用大量修改你真正的样式就可以调试你的CSS，直到你找到问题所在。

4、覆写用户生成内容中的行内样式

CSS开发中一个让人头疼的问题，就是当我们遇到用户生成内容中有行内样式的情况，这种情况多发生在一些使用了所见即所得网页编辑器的CMS系统中。在CSS层叠中，行内样式会覆盖常规样式。然而，我们并不想看到那些本该被我们定义好的CSS样式作用的元素却被用户生成内容中的行内样式改变。此时你就可以用!important来避免这种问题，因为，一条被开发者加了!important的样式会覆盖行内样式。

关于单独设计的博客页面

如果你曾经接触过设计个人博客页面的技术,有一种需求要求每个单独的文章都要有它自己独立的样式，需要使用行内样式。你可以用!important代码为一个个人页面编写它自己的样式。

!important在这个时候可以派上用场，为了在你的站点里创建一个独一无二的页面，你可以轻松覆盖默认的样式而不必担心原本的CSS权重。

五、!important总结

如果你遇到了特殊的需求，或者你想覆盖用户代理（译注：即浏览器）和开发者的默认样式，提高页面可访问性，你最好慎重使用!important。你要对你的CSS在考虑周全的同时尽可能地避免使用!important。甚至在上面提到的许多能用到!important的地方它也不总是必要的。

尽管如此，!important在CSS中还是有用的。如果你接手一个项目，而这个项目之前的开发人员正好使用了!important，那么你在修复一些问题的时候我们今天所讨论的将会派上用场。