之前在某個(gè)前端技術(shù)群中與高手討論‘!important是否為IE BUG，怎樣設(shè)計(jì)示例進(jìn)行驗(yàn)證’的問(wèn)題。當(dāng)時(shí)我舉的示例是引用網(wǎng)上前輩的例子：

#test?{
????color:red?!important;/*IE7、FF、OP等顯示紅色文字*/
????color:green;/*IE6顯示綠色文字*/
}

當(dāng)時(shí)被駁回，理由是這個(gè)示例沒(méi)有說(shuō)服力。后來(lái)自己想想，確實(shí)，這個(gè)例子應(yīng)該只能算是一個(gè)特例，是一種表面現(xiàn)象，而要說(shuō)服別人相信你的觀點(diǎn)，就必須說(shuō)出實(shí)質(zhì)的東西。最近再次研究CSS特殊性、繼承和層疊等技術(shù)，現(xiàn)在的理解應(yīng)該更進(jìn)一步了吧，至少我是把自己給說(shuō)服了——!important 確實(shí)是IE BUG！

為了更好地說(shuō)明實(shí)質(zhì)性的原理，有必要真正了解CSS重要性（!important）。當(dāng)然，要真正說(shuō)明清楚還必須了解特殊性、繼承和層疊等，但這些不是本文敘述的范圍。

在CSS優(yōu)先級(jí)規(guī)則中，!important 處于最高的優(yōu)先級(jí)，其權(quán)重之高優(yōu)先于內(nèi)聯(lián)樣式。了解CSS特殊性的同仁應(yīng)該非常清楚，內(nèi)聯(lián)樣式具有至高的優(yōu)先級(jí)（優(yōu)先級(jí)為1,0,0,0，ID選擇器的優(yōu)先級(jí)次之：0,1,0,0），但碰到 !important 的時(shí)候，內(nèi)聯(lián)樣式要略遜一籌（這里假設(shè)內(nèi)聯(lián)樣式中沒(méi)有設(shè)置!important）。舉個(gè)例子：

span?{color:gray?!important;}

以上樣式應(yīng)用到以下的結(jié)構(gòu)：

<span?style="color:blue;">我會(huì)顯示為什么顏色呢？</span>

經(jīng)驗(yàn)證，文本‘我會(huì)顯示為什么顏色呢？’將在瀏覽器（包括IE6）中顯示為灰色（gray）。這個(gè)結(jié)果說(shuō)明，瀏覽器（包括IE6）都能夠正常解析 !important 。

然而，當(dāng)我們稍稍改變一下樣式表：

span?{
????color:gray?!important;/*IE6將不會(huì)將文本顯示為灰色(gray)*/
????color:red;
}

應(yīng)用了以上樣式表之后，文本將會(huì)顯示為什么顏色呢？？經(jīng)驗(yàn)證，IE7、FF、OP均依舊顯示為灰色（color:gray），而IE6則顯示為藍(lán)色（color:blue）！

為什么會(huì)出現(xiàn)這種結(jié)果呢？BUG！！

真的是BUG嗎？讓我在修改一下樣式表：

span?{
????color:gray?!important;/*IE6將依舊不會(huì)解析該規(guī)則*/
????padding:8px;
????line-height:25px;
????vertical-align:middle;
????color:red;
}

我在兩個(gè)color屬性之間隨意添加幾條規(guī)則，結(jié)果與沒(méi)有那幾條規(guī)則的結(jié)果是完全一樣的，即，IE6將文本顯示為藍(lán)色（color:blue）。

好吧，如果以上的改動(dòng)不能說(shuō)明實(shí)質(zhì)性的問(wèn)題，那么我再次修改了樣式表：

span?{
????color:gray?!important;/*嘿，IE6終于‘看到’!important了*/
}
span?{
????color:red;
}

以上規(guī)則，如果沒(méi)有 !important ，則根據(jù)層疊規(guī)則，color:red 會(huì)將 color:gray 覆蓋掉，而內(nèi)聯(lián)樣式 color:blue 再將 color:red 覆蓋掉——但是有了 !important 之后，一切都必須因此而‘改觀’——瀏覽器（包括IE6）將文本顯示為灰色（color:gray !important）！

?

綜上所述，!important 是能夠被IE6解析了，而之所以會(huì)碰到以上IE6不能解析 !important 的情況，是因?yàn)閷蓚€(gè)相同的規(guī)則編入同一個(gè)規(guī)則分組（有!important的規(guī)則在前）時(shí)就構(gòu)成了IE6的BUG

參考資料：《CSS權(quán)威指南：第三版》 Eric A.Meyer著

轉(zhuǎn)載于:https://www.cnblogs.com/wangbin/archive/2010/11/06/1870638.html

總結(jié)

以上是生活随笔為你收集整理的解析并验证IE6及之前版本的'!important’ BUG(转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。