css 中的!important

转自：http://www.52css.com/article.asp?id=937
CSS中的!important是一个非常重要的属性，有时候发挥着非常大的作用，52CSS.com这方面的知识并不是非常多，我们看下面的文章，对它作比较感观的了解。
　　前几天写一些CSS代码的时候又难为我了，因为那个该死的IE6对CSS的支持是如此的差劲，以前我还没注意过，因为做的东西基本都是基于IE的，可是我这次为博客写的CSS要支持不止IE一个浏览器，可恨的是我装的Windows 7，这里面自带的是IE8浏览器，我自认为已经没有问题了，可是打开IE6，仍然出现错位，于是我决定看看IE6到底是什么情况。
　　我把所有的CSS块儿全部使用边框包起来，结果看到在IE中两个div之间的距离明显要宽于其他浏览器，比如你写一个div的margin属性为20px，那么在IE中就好像是40px一样，这也就是为什么本来精度计算的刚刚好，在IE下却偏偏错位的原因。
　　后来我看到了!important这个属性，这个属性其实也是css规范中的，结果IE6愣是不支持，也正因为它不支持，才让很多的CSSer们找到了解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：

Example Source Code [www.52css.com]
.home{
    margin-left:20px;
    margin-left:40px;
}

　　那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：

Example Source Code [www.52css.com]
.home{
    margin-left:20px!important;
    margin-left:40px;
}

　　那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。


http://www.kuqin.com/webpagedesign/20080513/8443.html
看了群博客上balibell说的“‘!important’ 在同一条样式定义中即大括号{}中，firefox、opera优先认领，ie不认得即忽略’!important’字符串。在非同一条样式中即不同的大括号中{}标有‘!important’的样式对所有浏览器均属优先认领。网上有说ie不认‘!important’的，大错特错了。”看来自己也是这么错误地过来了。难怪今天改css的时候，我只想针对firefox来做一个padding-bottom，就写了个.class{padding-bottom:6px !important;}可是却没有效果呢。看来网上也不能全信啊。

原来css在同一个大括号内是让firefox优先认领，也就是说只有在同一括号内定下两个样式的时候ie不得不忽略掉它，而不是像网上大多介绍的那样直接忽略。其实!important还有保护的作用，在任何需要保护的属性后面插入它可以避免被基于特性的属性覆盖。例如：#nav a{color:red;} a{color:teal !important},通常，一个带有id名#nav的元素里的一个链接会变设设位红色，因为这个#nav a比标签样式具体的多，但因为包含了！important，以为则会这个属性永远胜出。

这样，对!important的理解也就更深入了。
哦，这样叫!important才对么。
另再补充下css的优先级，一个标签选择器1分，一个类选择器10分，一个id选择器100，一个行内样式1000，！important就当无限分吧，呵呵。分值相同时按后出现优先的原则算，ok.