关于CSS中的使用技巧有很多， 今天主要探讨CSS中的!important属性用法。在CSS的使用中，遇到最多的问题就是不同浏览器之间的兼容问题。 由于IE并不严格执行W3C标准， 而又几乎垄断了浏览器市场。 所以作为一名合格的网站制作人员， 必须要针对不同的浏览器进行微调。 实现不同浏览器之间兼容的方法有很多， 比如利用JS探测用户的浏览器类型，从而调用不同的样式表。 或者就是利用!important 属性来实现微调的效果。
使用!important提升CSS样式的优先级别
CSS代码
#box {
color:red !important;
color: blue;
}HTML代码
<div id="Box"> 在不同的浏览器下，这行字的色应该不同！</div>
这个例子应该是大家经常见到的important的用法了，在IE6环境下，这行字是蓝色，在IE7及firefox下，为红色。这是因为IE6不认important（即不认 !importmant 但是还是认!important前面的color:red)，并且color:blue放在color:red的后面(后面的css定义覆盖了前面的color:red)，所以在IE6下字为蓝色；而在IE7及firefox下important级别优先，所以color:red !important;和color:blue;的前后顺序没有关系，在IE7及firefox下red跟blue谁先谁后都没有关系。
使用!important改变DIV字体的默认颜色
CSS代码
/* 设置两个DIV中的字体为红色 */
#box div{
color:red;
}
.important_false{
color:blue;
}
.important_true{
color:blue !important;
}HTML代码
<div id="Box"> <div class="important_false">这一行末使用important</div> <div class="important_true">这一行使用了important</div> </div>
例二中，CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，不同的是，第二行末使用important，而第三行使用了！默认情况下，class的优先级小于id，所以，第二行中即使用class重定义了自身样式，也无法生效，所以继承父级属性，这行字还是红色！但是，第三行中，用了important提升优先级（或看成强制重定义），所以这里的css得以生效，这行字变为了蓝色！
只有当同时出现两个同名的样式时，才可以这样用，就像下面这样的。
.myclass{
margin-left:20px!important;
margin-left:40px;
}因为使用!important属性就是为了提升指定CSS元素的优先级，也就只有相同的属性才需要提升优先级。
后来我看到了!important这个属性，这个属性其实也是css规范中的，结果IE6愣是不支持，也正因为它不支持，才让很多的CSSer们找到了解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：
.home{
margin-left:20px;
margin-left:40px;
}那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：
.home{
margin-left:20px!important;
margin-left:40px;
}那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。
说明!important对火狐和IE7,8的作用是相同的，而IE6而显出了特殊的结果
#test{
background:("a.png") no-repeat!important;
background:url(ie6.gif) no-repeat
}参考资料：
https://www.cnblogs.com/lykbk/archive/2012/08/09/huhu345545.html
川公网安备51010802032098
