{*rule !important}這個css規則當今在網頁制作的時候的普及已經非常流行了，以前我(wǒ)(wǒ)對它的理解就停留在‘浏覽器是否識别階段’ 而沒有真正去(qù)研究過，可是現在發生(shēng)了變化。衆所周知(zhī)，!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)中(zhōng)，之所以把*放(fàng)在後面是因爲ff不識别*而導緻隻對它設置了一(yī)次border;而ie 系列進行了兩次border設置後，後一(yī)個屬性覆蓋了前一(yī)個屬性，故爲一(yī)像素的邊框。
在(2)中(zhōng)，之所以把!important放(fàng)在第一(yī)個border 設置，是因爲它把這次border的優先級提高了，即使後面在一(yī)次甚至在N次設置border 也無效，但是Ie6.0對這個規則不接受，而導緻它應用了第二次的border 設置，也就是第二次覆蓋了第一(yī)次的這一(yī)原理，并不是它不識别!important;所以它的border 爲2 像素的紅框.
這是一(yī)個簡單的應用：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<style type="text/css">
div{
width: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>
例一(yī)：
CSS
#box {
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在不同的浏覽器下(xià)，這行字的色應該不同！</div>
這個例子應該是大(dà)家經常見到的important的用法了，在IE環境下(xià)，這行字是藍(lán)色，在firefox下(xià)，爲紅色，其用法不再多說了，看下(xià)一(yī)個例子。
例二：
CSS
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
HTML
<div id="Box">
<div class="important_false">這一(yī)行末使用important</div>
<div class="important_true">這一(yī)行使用了important</div>
</div>
例二中(zhōng)，CSS代碼第一(yī)行設定了box裏面所有div中(zhōng)字體(tǐ)色爲紅色，第二行和第三行都用class重新定義了自身div的字體(tǐ)色爲藍(lán)色，不同的是，第二行末使用important，而第三行使用了！
默認情況下(xià)，class的優先級小(xiǎo)于id，所以，第二行中(zhōng)即使用class重定義了自身樣式，也無法生(shēng)效，所以繼承父級屬性，這行字還是紅色！
但是，第三行中(zhōng)，用了important提升優先級（或看成強制重定義），所以這裏的css得以生(shēng)效，這行字變爲了藍(lán)色！
從這個例子，得以證明，ie對important的并不是不支持！
那麽爲什麽很多人都說ie不認識它呢？我(wǒ)(wǒ)想應該是大(dà)家實戰中(zhōng)可能都沒有遇到例子中(zhōng)的情況： 當你想提升class的優先級時怎麽辦？
也就是說大(dà)家可能都忽略了它的這一(yī)作用，隻了解在命名爲同一(yī)個元素的CSS代碼塊中(zhōng)，用它來提升排列順序相對靠前的代碼的優先級（例一(yī)）！
通過上邊兩個例子，得以總結：
important對一(yī)個良好（或者是标準）的浏覽器來說，不僅僅是從順序上提升代碼的優先級，還可以用來提升class的優先級（比如firefox），但是從IE對前者的不支持可以看出，這隻是IE的一(yī)大(dà)BUG，而不能說它“不認識、不支持”！
然而，不管怎麽樣，IE的這一(yī)大(dà)BUG幫助我(wǒ)(wǒ)們解決了很多兼容性問題，這顯然不是件壞事！
在IE中(zhōng)對盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之内（而不是加在寬度值上）。例如，你可能會使用以下(xià)css來指定某個容器的尺寸：
#box
{
width:100px;
border:5px;
padding:20px;
}
然後在html中(zhōng)應用：盒的總寬度在幾乎所有浏覽器中(zhōng)爲150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），唯獨在IE6之前版本的浏覽器中(zhōng)仍然爲100像素（邊框值和填充值包含在寬度值中(zhōng)），使用盒模型的hack可以解決這一(yī)問題，
#box
{
width:150px; //這個是錯誤的width，所有浏覽器都讀到了
voice-family: \}\; //IE5.X/win忽略了\}\後的内容
voice-family:inherit;
width:100px; //包括IE6/win在内的部分(fēn)浏覽器讀到這句，新的數值(300px)覆蓋掉了舊(jiù)的
}
還有更簡單的辦法如下(xià)：
CSS:
#box { width:150px; }
#box div { border:5px; padding:20px; }
HTML:
...
這樣一(yī)來在任何浏覽器中(zhōng)盒的總寬度都将是150像素。
但是即使是到了最新的IE6.0依然存在浮動模型（Float-model）的問題,值得慶幸（還是悲哀？）的是我(wǒ)(wǒ)們可以用IE中(zhōng)一(yī)直都不支持的!important來解決這個問題。
!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權(參見：W3.org的解釋)。語法格式{ sRule!important }，即寫在定義的最後面，例如：box{color:red !important;}
假如我(wǒ)(wǒ)們定義一(yī)個這樣的樣式：
#box{background-color: #ffffff !important; background-color: #000000;}
那麽在支持該語法的浏覽器，如Firefox、Opera中(zhōng)，能夠理解!important的優先級，背景顯示#ffffff顔色，而在IE中(zhōng)則顯示#000000.
*對于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)中(zhōng)，之所以把*放(fàng)在後面是因爲ff不識别*而導緻隻對它設置了一(yī)次border;而ie 系列進行了兩次border設置後，後一(yī)個屬性覆蓋了前一(yī)個屬性，故爲一(yī)像素的邊框。
在(2)中(zhōng)，之所以把!important放(fàng)在第一(yī)個border 設置，是因爲它把這次border的優先級提高了，即使後面在一(yī)次甚至在N次設置border 也無效，但是Ie6.0對這個規則不接受，而導緻它應用了第二次的border 設置，也就是第二次覆蓋了第一(yī)次的這一(yī)原理，并不是它不識别!important;所以它的border 爲2 像素的紅框.
這是一(yī)個簡單的應用：
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無标題文檔</title>
<style type="text/css">
div{
width: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>
例一(yī)：
CSS
#box {
color:red !important;
color:blue;
}
HTML
<div id="Box"> 在不同的浏覽器下(xià)，這行字的色應該不同！</div>
這個例子應該是大(dà)家經常見到的important的用法了，在IE環境下(xià)，這行字是藍(lán)色，在firefox下(xià)，爲紅色，其用法不再多說了，看下(xià)一(yī)個例子。
例二：
CSS
1 #box div{
color:red;
}
2 .important_false{
color:blue;
}
3.important_true{
color:blue !important;
}
HTML
<div id="Box">
<div class="important_false">這一(yī)行末使用important</div>
<div class="important_true">這一(yī)行使用了important</div>
</div>
例二中(zhōng)，CSS代碼第一(yī)行設定了box裏面所有div中(zhōng)字體(tǐ)色爲紅色，第二行和第三行都用class重新定義了自身div的字體(tǐ)色爲藍(lán)色，不同的是，第二行末使用important，而第三行使用了！
默認情況下(xià)，class的優先級小(xiǎo)于id，所以，第二行中(zhōng)即使用class重定義了自身樣式，也無法生(shēng)效，所以繼承父級屬性，這行字還是紅色！
但是，第三行中(zhōng)，用了important提升優先級（或看成強制重定義），所以這裏的css得以生(shēng)效，這行字變爲了藍(lán)色！
從這個例子，得以證明，ie對important的并不是不支持！
那麽爲什麽很多人都說ie不認識它呢？我(wǒ)(wǒ)想應該是大(dà)家實戰中(zhōng)可能都沒有遇到例子中(zhōng)的情況： 當你想提升class的優先級時怎麽辦？
也就是說大(dà)家可能都忽略了它的這一(yī)作用，隻了解在命名爲同一(yī)個元素的CSS代碼塊中(zhōng)，用它來提升排列順序相對靠前的代碼的優先級（例一(yī)）！
通過上邊兩個例子，得以總結：
important對一(yī)個良好（或者是标準）的浏覽器來說，不僅僅是從順序上提升代碼的優先級，還可以用來提升class的優先級（比如firefox），但是從IE對前者的不支持可以看出，這隻是IE的一(yī)大(dà)BUG，而不能說它“不認識、不支持”！
然而，不管怎麽樣，IE的這一(yī)大(dà)BUG幫助我(wǒ)(wǒ)們解決了很多兼容性問題，這顯然不是件壞事！
在IE中(zhōng)對盒模型（box-model）的解釋是有BUG的，IE6.0之前的版本會把某元素的邊框值和填充值包含在寬度之内（而不是加在寬度值上）。例如，你可能會使用以下(xià)css來指定某個容器的尺寸：
#box
{
width:100px;
border:5px;
padding:20px;
}
然後在html中(zhōng)應用：盒的總寬度在幾乎所有浏覽器中(zhōng)爲150像素（100像素寬度+兩條5像素的邊框+兩個20像素的填充），唯獨在IE6之前版本的浏覽器中(zhōng)仍然爲100像素（邊框值和填充值包含在寬度值中(zhōng)），使用盒模型的hack可以解決這一(yī)問題，
#box
{
width:150px; //這個是錯誤的width，所有浏覽器都讀到了
voice-family: \}\; //IE5.X/win忽略了\}\後的内容
voice-family:inherit;
width:100px; //包括IE6/win在内的部分(fēn)浏覽器讀到這句，新的數值(300px)覆蓋掉了舊(jiù)的
}
還有更簡單的辦法如下(xià)：
CSS:
#box { width:150px; }
#box div { border:5px; padding:20px; }
HTML:
...
這樣一(yī)來在任何浏覽器中(zhōng)盒的總寬度都将是150像素。
但是即使是到了最新的IE6.0依然存在浮動模型（Float-model）的問題,值得慶幸（還是悲哀？）的是我(wǒ)(wǒ)們可以用IE中(zhōng)一(yī)直都不支持的!important來解決這個問題。
!important是CSS1就定義的語法，作用是提高指定樣式規則的應用優先權(參見：W3.org的解釋)。語法格式{ sRule!important }，即寫在定義的最後面，例如：box{color:red !important;}
假如我(wǒ)(wǒ)們定義一(yī)個這樣的樣式：
#box{background-color: #ffffff !important; background-color: #000000;}
那麽在支持該語法的浏覽器，如Firefox、Opera中(zhōng)，能夠理解!important的優先級，背景顯示#ffffff顔色，而在IE中(zhōng)則顯示#000000.
475003427