解析并验证IE6及之前版本的'!important’ BUG

之前在某个前端技术群中与高手讨论‘!important是否为IE BUG，怎样设计示例进行验证’的问题。当时我举的示例是引用网上前辈的例子：

#test {
    color:red !important;/*IE7、FF、OP等显示红色文字*/
    color:green;/*IE6显示绿色文字*/
}

当时被驳回，理由是这个示例没有说服力。后来自己想想，确实，这个例子应该只能算是一个特例，是一种表面现象，而要说服别人相信你的观点，就必须说出实质的东西。最近再次研究CSS特殊性、继承和层叠等技术，现在的理解应该更进一步了吧，至少我是把自己给说服了——!important 确实是IE BUG！

为了更好地说明实质性的原理，有必要真正了解CSS重要性（!important）。当然，要真正说明清楚还必须了解特殊性、继承和层叠等，但这些不是本文叙述的范围。

在CSS优先级规则中，!important 处于最高的优先级，其权重之高优先于内联样式。了解CSS特殊性的同仁应该非常清楚，内联样式具有至高的优先级（优先级为1,0,0,0，ID选择器的优先级次之：0,1,0,0），但碰到 !important 的时候，内联样式要略逊一筹（这里假设内联样式中没有设置!important）。举个例子：

span {color:gray !important;}

以上样式应用到以下的结构：

<span style="color:blue;">我会显示为什么颜色呢？</span>

经验证，文本‘我会显示为什么颜色呢？’将在浏览器（包括IE6）中显示为灰色（gray）。这个结果说明，浏览器（包括IE6）都能够正常解析 !important 。

然而，当我们稍稍改变一下样式表：

span {
    color:gray !important;/*IE6将不会将文本显示为灰色(gray)*/
    color:red;
}

应用了以上样式表之后，文本将会显示为什么颜色呢？？经验证，IE7、FF、OP均依旧显示为灰色（color:gray），而IE6则显示为蓝色（color:blue）！

为什么会出现这种结果呢？BUG！！

真的是BUG吗？让我在修改一下样式表：

span {
    color:gray !important;/*IE6将依旧不会解析该规则*/
    padding:8px;
    line-height:25px;
    vertical-align:middle;
    color:red;
}

我在两个color属性之间随意添加几条规则，结果与没有那几条规则的结果是完全一样的，即，IE6将文本显示为蓝色（color:blue）。

好吧，如果以上的改动不能说明实质性的问题，那么我再次修改了样式表：

span {
    color:gray !important;/*嘿，IE6终于‘看到’!important了*/
}
span {
    color:red;
}

以上规则，如果没有 !important ，则根据层叠规则，color:red 会将 color:gray 覆盖掉，而内联样式 color:blue 再将 color:red 覆盖掉——但是有了 !important 之后，一切都必须因此而‘改观’——浏览器（包括IE6）将文本显示为灰色（color:gray !important）！

 

综上所述，!important 是能够被IE6解析了，而之所以会碰到以上IE6不能解析 !important 的情况，是因为将两个相同的规则编入同一个规则分组（有!important的规则在前）时就构成了IE6的BUG

参考资料：《CSS权威指南：第三版》 Eric A.Meyer著