CSS中!important的作用(转)

  {*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了，以前我对它的理解就停留在‘浏览器是否识别阶段’ 而没有真正去研究过，可是现在发生了变化。众所周知，!important这个规则对Ie6.0,Ie7.0和Firefox能写hack，现在就来讲解这是什么原理：
      *对于Ie系列浏览器都能够识别， firefox 浏览器则不能识别;
      !important只有Ie7.0和firefox可以识别，但是Ie6.0不能成功应用.

     (1)区别ie与firefox的hack为:border:2px solid #f00;*border:1px solid #f00;
     (2)区别Ie6.0 与Ie7.0、firefox的hack为:border:1px solid #f00!important;border:2px solid #f00;

     在(1)中，之所以把*放在后面是因为ff不识别*而导致只对它设置了一次border;而ie 系列进行了两次border设置后，后一个属性覆盖了前一个属性，故为一像素的边框。

     在(2)中，之所以把!important放在第一个border 设置，是因为它把这次border的优先级提高了，即使后面在一次甚至在N次设置border 也无效，但是Ie6.0对这个规则不接受，而导致它应用了第二次的border 设置，也就是第二次覆盖了第一次的这一原理，并不是它不识别!important;所以它的border 为2 像素的红框.

这是一个简单的应用：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
800px;
height:250px;
background-color:yellow!important;
background-color:red;
border:3px solid #000!important;
*border:5px solid #f00!important;
border:1px solid #000;
}
</style>
</head>

例一：

CSS

#box {
color:red !important;
color:blue;
}

HTML

<div id="Box"> 在不同的浏览器下，这行字的色应该不同！</div>

这个例子应该是大家经常见到的important的用法了，在IE环境下，这行字是蓝色，在firefox下，为红色，其用法不再多说了，看下一个例子。

例二：
CSS

1 #box div{
     color:red;
}
2 .important_false{
     color:blue;
}
3.important_true{
     color:blue !important;
}

HTML

<div id="Box">
CSS中!important的作用(转)

<div class="important_false">这一行末使用important</div>
CSS中!important的作用(转)

<div class="important_true">这一行使用了important</div>
CSS中!important的作用(转)

</div>

    例二中，CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，不同的是，第二行末使用important，而第三行使用了！

    默认情况下，class的优先级小于id，所以，第二行中即使用class重定义了自身样式，也无法生效，所以继承父级属性，这行字还是红色！

   但是，第三行中，用了important提升优先级（或看成强制重定义），所以这里的css得以生效，这行字变为了蓝色！

   从这个例子，得以证明，ie对important的并不是不支持！

   那么为什么很多人都说ie不认识它呢？我想应该是大家实战中可能都没有遇到例子中的情况： 当你想提升class的优先级时怎么办？

   也就是说大家可能都忽略了它的这一作用，只了解在命名为同一个元素的CSS代码块中，用它来提升排列顺序相对靠前的代码的优先级（例一）！

通过上边两个例子，得以总结：
    important对一个良好（或者是标准）的浏览器来说，不仅仅是从顺序上提升代码的优先级，还可以用来提升class的优先级（比如firefox），但是从IE对前者的不支持可以看出，这只是IE的一大BUG，而不能说它“不认识、不支持”！

    然而，不管怎么样，IE的这一大BUG帮助我们解决了很多兼容性问题，这显然不是件坏事！

在IE中对盒模型（box-model）的解释是有BUG的，IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内（而不是加在宽度值上）。例如，你可能会使用以下css来指定某个容器的尺寸：
　　#box
　　{
　　　100px;
　　　border:5px;
　　　padding:20px;
　　}
　　然后在html中应用：盒的总宽度在几乎所有浏览器中为150像素（100像素宽度+两条5像素的边框+两个20像素的填充），唯独在IE6之前版本的浏览器中仍然为100像素（边框值和填充值包含在宽度值中），使用盒模型的hack可以解决这一问题，
　　#box
　　{
　　　150px;　　　　　　　　//这个是错误的width，所有浏览器都读到了
　　　voice-family: \}\; 　　　　 //IE5.X/win忽略了\}\后的内容
　　　voice-family:inherit;
　　　100px; 　　　　　　　//包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
　　}
还有更简单的办法如下：
　　CSS:
　　#box { 150px; }
　　#box div { border:5px; padding:20px; }
　　HTML:
　　...

这样一来在任何浏览器中盒的总宽度都将是150像素。
　　但是即使是到了最新的IE6.0依然存在浮动模型（Float-model）的问题,值得庆幸（还是悲哀？）的是我们可以用IE中一直都不支持的!important来解决这个问题。
　　!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：box{color:red !important;}
　　假如我们定义一个这样的样式：
　　#box{background-color: #ffffff !important; background-color: #000000;}
　　那么在支持该语法的浏览器，如Firefox、Opera中，能够理解!important的优先级，背景显示#ffffff颜色，而在IE中则显示#000000.

!important这个属性，这个属性其实也是css规范中的，结果IE6愣是不支持，也正因为它不支持，才让很多的CSSer们找到了解决的方法。一般来讲，在css中，如果在同一个css块中写下两个同样的属性，那么其实是按照最下面的来执行的，比如说：

.home{
margin-left:20px;
margin-left:40px;
}

　　那么在执行的时候其实是按照40px来执行的，!important的出现就是为了让用户自己设置被执行语句的优先级。如果把上面的语句改为：

.home{
margin-left:20px!important;
margin-left:40px;
}

　　那么在火狐、google浏览器以及IE7以上版本下将会按照20px来执行，而在IE6下却仍然按照40px来执行，因为IE6并不支持!important规范，我们就可以按照这个规则来满足IE6的设计需要，什么时候发现IE6和其他浏览器显示效果不同，那么就设置两个，在上面的一个加入!important标记，而下面的一句则不需要添加，这样IE6就按照下面的来执行了。资深的CSSer说：如今的CSS处处!important。这可都是天杀的IE6惹的祸，大家说IE6就是一坨代谢产物一点也不为过。

CSS定义对于不同浏览器的兼容性问题一直比较困惑。不管是用div+CSS还是table来进行页面设计，我对WEB重建的理解是：速度与兼容性。即要尽可能提高浏览者访问页面时浏览的速度、要使页面能尽可能兼容不同来访浏览器的浏览效果。所以近期的设计都是打开几个不同的浏览器进行测试，如IE、GoSuRF Browser、Opera和Firefox浏览器。测试结果表明，IE和GoSuRF Browser对CSS的支持最好，Opera其次，Firefox要求最高。

　　先看下面的效果：

　　以下图片是在IE浏览器、GoSuRF Browser浏览器和Opera浏览器中看到的效果：

　　在Mozilla Firefox浏览器中看到的效果：

　　其中在IE和GoSuRF Browser浏览器浏览时的效果基本没差别，居中正常；Opera浏览器中对于这里居中效果也正常（但对于页面其他地方就有些问题，这在后面再研究）；在Mozilla Firefox浏览器中看到的效果就不同了，居中是对的，但是二边都没对齐，抓图仔细查看了下，二边多出了5个像素的宽度，并且里面的缩进量都有问题。

　　先看看CSS中对于中间区域的定义：

#mainall {
760px; height: 300px;
padding: 5px; margin: 0 auto;
background: #fff;
}

　　可能是padding: 5px;这个缩进量Firefox不支持，先测试将“padding: 5px;”改成“padding: 0px;”，保存后浏览，二边多出了5个像素的宽度就不见了。就是它了。在CSS中再加一句：“padding: 0px !important; ”：

#mainall {
760px; height: 300px;
padding: 0px !important;
padding: 5px; margin: 0 auto;
background: #fff;
}

　　!important的作用是提升指定样式规则的应用优先权，但IE不支持的值，CSS中即使定义了IE也会忽略这它而选择按后面的定义执行并显示，而Opera和Firefox却会按!important指出的规则优先显示。看下浏览效果：

　　首先二边对齐的问题解决了。但是右侧的div内容却被挤到下面去了。很可能是宽度不够的缘故。再看下左右二个div的定义：

/*===中部左侧定义开始===*/
#mainbox {
padding:10px; float: left;
495px;
background: #fff;
}
/*===中部右侧定义开始===*/
#rightbox {
float: right;
padding: 5px;
250px; height: 100%;
background: #F6F7F9;
}

　　应该是这个狐狸（Firefox）将padding这个补丁边距的缩进量，不但是只具有缩进效果，并且还让浏览器解析成：整个box的宽度为width＋padding了！晕哦，找到这个原因，解决起来方便些了：将整个box的宽度在Firefox中应该计算为（width－padding）。让!important来做这个工作吧：

/*===中部左侧定义开始===*/
#mainbox {
padding: 0px !important;　/****兼容Firefox浏览器*****/
padding:10px; float: left;
495px;
background: #fff;
}
/*===中部右侧定义开始===*/
#rightbox {
float: right;
padding: 5px;
250px; height: 100%;
background: #F6F7F9;
}

　　再次浏览，终于左侧上去了，哈哈，应该就是这个问题啦。但是问题又来了，右侧怎么灰色的标题栏到边界外面去了？

　　再看CSS定义：

#rightbox dt {
padding: 3px !important;　/****兼容Firefox浏览器*****/
padding: 3px; margin: 0px; border: 0px;
100%;
font-weight: normal; font-family:宋体; font-size: 12px; color: #fff;
background: #A6A9AE; text-align: left;
}
#rightbox dd {
padding: 5px !important;　/****兼容Firefox浏览器*****/
padding: 10px; margin: 0px; border: 0px;
text-align: left;
100%;
font-weight: normal; font-family:宋体; font-size: 12px; line-height: 24px;
}

　　
　　这里设置了标题#rightbox dt的宽度为100%，测试一下，去掉这个定义就显示正常了，用相同的手法处理下，加上个定义“ !important;”，让Firefox先认识这个定义而丢弃 100%的定义即可：

#rightbox dt {
padding: 3px !important;　/****兼容Firefox浏览器*****/
padding: 3px; margin: 0px; border: 0px;
!important;　/****兼容Firefox浏览器*****/
100%;
font-weight: normal; font-family:宋体; font-size: 12px; color: #fff;
background: #A6A9AE; text-align: left;
}
#rightbox dd {
padding: 5px !important;　/****兼容Firefox浏览器*****/
padding: 10px; margin: 0px; border: 0px;
text-align: left;
!important;　/****兼容Firefox浏览器*****/
100%;
font-weight: normal; font-family:宋体; font-size: 12px; line-height: 24px;
}

　浏览下效果，正常了！

　　　　

调整前的效果　　　　　　　　　用 !important后的效果