之前在某個前端技術群中與高手討論‘!important是否為IE BUG，怎樣設計示例進行驗證’的問題。當時我舉的示例是引用網上前輩的例子：

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

當時被駁回，理由是這個示例沒有說服力。后來自己想想，確實，這個例子應該只能算是一個特例，是一種表面現象，而要說服別人相信你的觀點，就必須說出實質的東西。最近再次研究CSS特殊性、繼承和層疊等技術，現在的理解應該更進一步了吧，至少我是把自己給說服了——!important 確實是IE BUG！

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

在CSS優先級規則中，!important 處于最高的優先級，其權重之高優先于內聯樣式。了解CSS特殊性的同仁應該非常清楚，內聯樣式具有至高的優先級（優先級為1,0,0,0，ID選擇器的優先級次之：0,1,0,0），但碰到 !important 的時候，內聯樣式要略遜一籌（這里假設內聯樣式中沒有設置!important）。舉個例子：

span?{color:gray?!important;}

以上樣式應用到以下的結構：

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

經驗證，文本‘我會顯示為什么顏色呢？’將在瀏覽器（包括IE6）中顯示為灰色（gray）。這個結果說明，瀏覽器（包括IE6）都能夠正常解析 !important 。

然而，當我們稍稍改變一下樣式表：

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

應用了以上樣式表之后，文本將會顯示為什么顏色呢？？經驗證，IE7、FF、OP均依舊顯示為灰色（color:gray），而IE6則顯示為藍色（color:blue）！

為什么會出現這種結果呢？BUG！！

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

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

我在兩個color屬性之間隨意添加幾條規則，結果與沒有那幾條規則的結果是完全一樣的，即，IE6將文本顯示為藍色（color:blue）。

好吧，如果以上的改動不能說明實質性的問題，那么我再次修改了樣式表：

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

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

?

綜上所述，!important 是能夠被IE6解析了，而之所以會碰到以上IE6不能解析 !important 的情況，是因為將兩個相同的規則編入同一個規則分組（有!important的規則在前）時就構成了IE6的BUG

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

轉載于:https://www.cnblogs.com/wangbin/archive/2010/11/06/1870638.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。