!important是CSS1就定義的語法,作用是提高指定樣式規則的應用優先權。語法格式{ cssRule !important }
{*cssRule !important}這個css規則當今在網頁製作的時候的普及已經非常流行了,以前我對它的理解就停留在'瀏覽器是否識別階段' 而沒有真正去研究過,可是現在發生了變化。下面來看幾個例子。
例一:
CSS
#Box {
color: red !important;
color: blue;
padding: 30px;
}
Html
在不同的瀏覽器下,這行字的顏色應該不同!
那麼在支援該語法的瀏覽器,如Firefox、Opera、Chrome中,能夠理解!important的優先級,字體顏色顯示red顏色,而在IE中則顯示blue。因為IE瀏覽器不辨識!important,非IE瀏覽器辨識!important,且!important優先權較高。那麼再看下面的例子,只是把CSS樣式裡面的color屬性交換下順序,Html程式碼部分不變,會出現什麼樣的狀況呢?
CSS
#Box {
color: blue;
color: red !important;
padding: 30px;
}那麼在這樣的情況下,無論是IE瀏覽器和非IE瀏覽器辨識下,字體顏色都會顯示red顏色。雖然IE瀏覽器不辨識!important,但它辨識這句 "color: red !important;" 中的 color:red。因此在IE下,瀏覽器先識別出"color:blue",然後識別出"color: red !important;" 中的color:red,因此覆蓋了前面的"color: blue",所以最後字體顏色都顯示出來就是red了。