之前在某个前端技术群中与高手讨论‘!important是否为IE BUG,怎样设计示例进行验证’的问题。当时我举的示例是引用网上前辈的例子:
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)。举个例子:
以上样式应用到以下的结构:
经验证,文本‘我会显示为什么颜色呢?’将在浏览器(包括IE6)中显示为灰色(gray)。这个结果说明,浏览器(包括IE6)都能够正常解析 !important 。
然而,当我们稍稍改变一下样式表:
color : gray !important ; /* IE6将不会将文本显示为灰色(gray) */
color : red ;
}
应用了以上样式表之后,文本将会显示为什么颜色呢??经验证,IE7、FF、OP均依旧显示为灰色(color:gray),而IE6则显示为蓝色(color:blue)!
为什么会出现这种结果呢?BUG!!
真的是BUG吗?让我在修改一下样式表:
color : gray !important ; /* IE6将依旧不会解析该规则 */
padding : 8px ;
line-height : 25px ;
vertical-align : middle ;
color : red ;
}
我在两个color属性之间随意添加几条规则,结果与没有那几条规则的结果是完全一样的,即,IE6将文本显示为蓝色(color:blue)。
好吧,如果以上的改动不能说明实质性的问题,那么我再次修改了样式表:
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著