css中important的作用

!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了。