关于Internet Explorer 6（IE6）不支持CSS中!important属性

长久以来，我们都口口相传Internet Explorer 6是不支持CSS中的!important属性的，这不仅体验在从一些高手那里传授过来的经验，网络上的教程中，甚至在某些经典教程中都存在这样的认识误区。包括在CSS Matery （作者:Andy Budd等）也没有提及CSS中的!important在Internet Explorer 6中的问题。此书中讲到的CSS Hack技术也使用了我前面那篇文章中的说法。不过，按照我的（或者说是大多数人的）习惯，基本上都不会发现CSS 中的!important会存在问题。

一、Internet Explorer 6 (IE 6)不支持CSS中!important属性由来

我们在CSS中使用!important来区分是否Internet Explorer 6 (IE 6)的写法大体如下：

view plain copy to clipboard print ?

1. .a {  
2.     color:red !important;  
3.     color:blue;  
4. }  

在所有非Internet Explorer 6 (IE 6)及以下浏览器中，class属性为a的元素内文字都将显示为红色，而在Internet Explorer 6 (IE 6)中则显示为蓝色，因此我们也经常用这种方法作为CSS Hack技术来区分浏览器。这正是这个广为流传的CSS Hack技术让大多数人觉得Internet Explorer 6 (IE 6)是不支持!important的。
点击查看演示

二、偶然的发现

可能某位Web designer在写CSS代码的时候，已经为某个class写了一段代码，后来忘记了又重新写了一段并使用了!important，于是发现了这个问题（所有的CSS Hack技术几乎都来来自不经意间的发现）。

我们把上面那段简单的代码换一种写法：

view plain copy to clipboard print ?

1. .a {color:red !important;}  
2. .a {color:blue;}  

基本上完全一样的写法，只不过我们把一个class为a的CSS规则分开写了两次，正是这样的写法，使Internet Explorer 6 (IE 6)产生了奇妙的变化——!important居然起作用了！
点击查看演示效果

三、总结

总结一下上面的的例子，很容易发现，在Internet Explorer 6 (IE 6)中书写CSS时，当同一个属性多次出现在一个大括号（{}）时，最后一条规则起作用，也就是!important被忽视；当同一个属性多次出现在不同的大括号中时，以!important属性的优先级最高。

所有的知识可能都不像我们最初认知的那样，学习就是一个否定的过程。