前几天在整理关于@import的一些内容时（这部分的内容将会在本月底发布在ctrip ued博客中），突然想到!important这个东西似乎现在还是有不少人认为在IE6中是不支持的。对于这点我是完全不认同的，虽然在很早之前我也是认为完全不支持，但后来经朋友提醒，并且测试之后的确证明了IE6是支持的，只是支持的情况不一样而已。
对于!important在IE6的支持情况，网络上零零星星还是找到一些，很意外我在百度百科中也看到了，所以太多的废话也就不说了，直接看http://baike.baidu.com/view/5843374.htm这个页面上的最后的一点代码介绍，如果不想点击去看的话，引用部分代码，( # ▽ # ) 省去自己写代码，我好懒啊……
1 2 |
#a{with:100px !important;} /*ie6 有效*/ #a{width:50px;} |
1 |
#a{width:100px !important; width:50px;} /*ie6不支持*/ |
这两段代码大家可以分别在IE6中做一个测试，会发现当!important写在一个选择符内的时候，IE6会变得比较脑残。这个时候我们也就可以作为传说中的HACK方式来处理页面的兼容问题，但不建议这样操作，因为!important的优先级太高了。 (+﹏+)~
提到了优先级的话题，我能想到的一点就是以前有过几次我作为不合格的面试官时，问过关于!important的几个问题，不过没想到得到的答案比我这个不合格的面试官还要不合格。记得当时我的问题是“对于!important的看法是怎么样？IE6支持吗？”，这个问题相信大家找谷哥或者度娘都可以得到答案。
偶尔我也会这样问“如果在页面某个标签中写了style属性，如何通过CSS文件中的样式定义来覆盖style属性中的样式？”。记得当时得到比较多的答案就是“style属性不是优先级最高了，而CSS文件中定义的样式无论是ID还是class都没办法覆盖style属性中的样式的。”真的是没办法吗？那换个方式来说，下面这个代码，最终是什么颜色？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #linxz {color:#FF0000;} .blog {color:#CC9502;} #linxz.blog {color:#9696C8;} </style> </head> <body> <div style="color:#488F48;" id="linxz" class="blog">文字颜色</div> </body> </html> |
嗯，答案是style属性中的#488F48对吧？那么这个时候，给任意一个选择符中加上!important后呢？比如这样：
1 |
.blog {color:#CC9502 !important;} |
颜色变了吧？
废话完毕，又一次回顾了几年前的内容。