Question

css样式中遇到!important

.iconAdd {
background-image: url(../ext-2.2/resources/images/add.gif) !important;
}

.iconDelete {
background-image: url(../ext-2.2/resources/images/delete.gif) !important;
}
为什么在末尾要加!important，这是干什么用的？

Answer 1

1、新建一个html代码页面。

2、创建一个input按钮标签，然后给这个按钮添加一个changeBg()的点击事件。

代码：<input type="button"   value="点击切换背景色" onclick="changeBg()"/>

3、创建style标签，然后创建一个class类为btn用于设置按钮样式，其中按钮的背景设置background-color:#009F95!important;

代码：

<style type="text/css">

.btn{

border:1pxsolid#ddd;

padding:5px8px;

background-color:#009F95!important;

}

</style>

4、给按钮input标签添加class="btn"。

代码：<input type="button" class="btn"  value="点击切换背景色" onclick="changeBg()"/>

5、引入jquery库，然后新建一个script标签，在这个标签里为changeBg()点击事件添加修改按钮的背景色。

changeBg()修改背景色代码：

functionchangeBg(){

$(".btn").css("cssText","background-color:red!important;");

}

6、保存html代码页面后使用浏览器打开，点击按钮后发现按钮背景色被修改为红色。

Answer 2

本来不想回答的，但是我发现楼上回答有问题，会让人误解，我更正一下
!important 表示高优先级。
IE6浏览器不认识 !important 。

举例：
正常情况下，写在下面的样式优先级高于上面的样式
demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}
加了!important 那么它的优先级会比较高，ie6比较傻，不认识。
demo2{
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

但是注意，IE6不认识!important的优先级，但并不代表IE6不认识带!important的样式属性。
demo3{
color:red;
color:green !important; /*包括IE6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

Answer 3

加 !important是为了IE6跟其他版本的浏览器区别开，因为正常情况下，CSS定义的样式在IE6、8和FF下有不同的结果，所以设计会用 !important来兼容它们，所以加有 !important的那个值其实是定义给IE8和FF的，IE6是不认这个值的

Answer 4

假如我要对一个div在IE7中宽为200px，在IE6中宽180px，则：
div { width:200px !important; }
div { width:180px; }

!important：表示某条属性（声明）具体最高的优化级，所以虽然看起来下面的把上方的属性覆盖了，但真正由于上面度200的优化级最高，所以最后div的宽还是200px

!important：IE7及以上、Firefox都支持，但IE6不支持，所以下面的属性会把上面的覆盖，即在IE6宽显示为180px

设置此项主要的目的就是为了达到在各种及各版本的浏览器之间兼容，这里如果考虑周全的话还需对IE7及FF进行区别了

Answer 5

我也想问这个问题
我只知道!important是IE不能识别的
在FF和IE浏览不兼容的情况下用这个很好
是不是用它可以确保在除了在IE的浏览器中不出错了！