作者：武利剑

标准参考

!important 规则

在 CSS2.1 规范 6.4.1 Cascading order 中根据CSS样式的来源和重要性，给出了优先级的升序排列：

1. 浏览器默认样式；
2. 浏览器用户自定义一般¹样式；
3. 开发者定义一般样式；
4. 开发者定义加了 '!mportant' 的样式
5. 浏览器用户自定义加了 '!mportant' 的样式

【注】
1. 未加 '!important' 的样式。

根据 CSS2.1 规范中的描述，'!important' 可以提高样式的优先级，他是最高优先权重，无疑对样式优先级影响是巨大的。

为了平衡开发者设置的样式和浏览器用户设定的样式，默认开发者设置的样式优于浏览器用户设置的样式；另外，声明了'!important' 的样式优于其他样式声明。

关于 '!important' 的详细信息，请参考 CSS2.1 规范 6.4.2 !important rules 中的内容。

问题描述

IE6 IE7(Q) IE8(Q) 中不支持位于同一个选择器内的 '!important' 规则，他可能会导致实际样式效果与预计不符。

造成的影响

使用 '!important' 规则而没有考虑 IE6 的情况，可能会使 IE6 中的表现跟其他浏览器有差别。

其影响程度跟属性值的重要程度成正比。比如， '!important' 设置在跟页面布局有很大关系的宽度值上，那么宽度的影响可能会作用于整个布局。

受影响的浏览器

IE6 IE7 IE8(Q)	不支持位于同一个选择器内的 '!important' 规则。

问题分析

在 IE6 IE7(Q) IE8(Q) 中，不完全支持 '!important' 规则。位于同一个选择器内的 '!important '规则将失效。

分析以下代码：

<style type="text/css"> div{ width:100px; height:30px; background-color:gold !important; background-color:silver; } </style>
                <div></div>

• DIV 是一个宽高固定的长方形。
• DIV 的颜色进行了两次设置，一次为金色，一次为银色，其中金色在银色的前面，并且颜色值后有 '!important' 声明；

根据 CSS2.1 规范中的描述可知，DIV 最终显示应为金色。

这段代码在不同的浏览器环境中的表现：

IE6 IE7(Q) IE8(Q)	IE7(S) IE8(S) Firefox Opera Safari Chrome

 

下面看若 '!important' 位于两个选择器内的情况：

<style> .c1 { background:blue !important; } .c2 { background:green; } </style> <div
                style="width:100px; height:100px;" class="c1 c2"></div>

所有浏览器

运行后发现所有浏览器中，DIV 元素的背景色均为蓝色。则证明 IE6 IE7(Q) IE8(Q) 支持不位于同一个选择器内的 '!important' 规则。

解决方案

这是浏览器的 Bug 导致，无法通过常规方式解决。不过，一般 '!important' 规则常常用于 CSS hack 以区分 IE6 与其他浏览器，其作为 hack 存在的意义已大于其本身的含义。

参见

知识库

• ...

相关问题

• ...