!important用法使用介紹

發(fā)布時間：2013-10-05 16:46:48 作者：佚名

!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應(yīng)用，在本文將為大家介紹下!important的使用方法，感興趣的朋友可以了解下

*對于Ie系列瀏覽器都能夠識別， firefox 瀏覽器則不能識別;

!important只有Ie7.0和firefox可以識別，但是Ie6.0不能成功應(yīng)用.

(1)區(qū)別ie與firefox的hack為:

border:2px solid #f00;

*border:1px solid #f00;

(2)區(qū)別Ie6.0 與Ie7.0、firefox的hack為:

border:1px solid #f00!important;

border:2px solid #f00;

在(1)中，之所以把*放在后面是因為ff不識別*而導(dǎo)致只對它設(shè)置了一次border;而ie 系列進(jìn)行了兩次border設(shè)置后，后一個屬性覆蓋了前一個屬性，故為一像素的邊框。

在(2)中，之所以把!important放在第一個border 設(shè)置，是因為它把這次border的優(yōu)先級提高了，即使后面在一次甚至在N次設(shè)置border 也無效，但是Ie6.0對這個規(guī)則不接受，而導(dǎo)致它應(yīng)用了第二次的border 設(shè)置，也就是第二次覆蓋了第一次的這一原理，并不是它不識別!important;所以它的border為2 像素的紅框.

CSS

復(fù)制代碼

代碼如下:

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

HTML

復(fù)制代碼

代碼如下:

<div id="Box">
<div class="important_false">這一行末使用important</div>
<div class="important_true">這一行使用了important</div>
</div>

復(fù)制代碼

代碼如下:

第一行字為紅色，第二行子為藍(lán)色。
important對一個良好（或者是標(biāo)準(zhǔn)）的瀏覽器來說，不僅僅是從順序上提升代碼的優(yōu)先級，還可以用來提升class的優(yōu)先級（比如firefox），但是從IE對前者的不支持可以看出，這只是IE的一大BUG，而不能說它“不認(rèn)識、不支持”！
在IE中對盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之內(nèi)（而不是加在寬度值上）。例如，你可能會使用以下css來指定某個容器的尺寸：

復(fù)制代碼

代碼如下:

#box
　　{
　　　width:100px;
　　　border:5px;
　　　padding:20px;
　　}

然后在html中應(yīng)用：盒的總寬度在幾乎所有瀏覽器中為150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），唯獨(dú)在IE6之前版本的瀏覽器中仍然為100像素（邊框值和填充值包含在寬度值中），使用盒模型的hack可以解決這一問題

復(fù)制代碼

代碼如下:

#box
　　{
　　　width:150px;　　　　　　 //這個是錯誤的width，所有瀏覽器都讀到了
　　　voice-family: \}\; 　　　　 //IE5.X/win忽略了\}\后的內(nèi)容
　　　voice-family:inherit;
　　　width:100px; 　　　　　　//包括IE6/win在內(nèi)的部分瀏覽器讀到這句，新的數(shù)值(100px)覆蓋掉了舊的
　　}