css中important的作用

!important是CSS1就定義的文法，作用是提高指定樣式規則的應用優先權。文法格式{ cssRule !important }

{*cssRule !important}這個css規則當今在網頁製作的時候的普及已經非常流行了，以前我對它的理解就停留在‘瀏覽器是否識別階段’ 而沒有真正去研究過，可是現在發生了變化。下面來看幾個例子。

例一：

CSS

#Box {

color: red !important;

color: blue;

padding: 30px;

width : 300px;

border:1px solid pink;

}

Html

<div id="Box">

在不同的瀏覽器下，這行字的色應該不同！

</div>

那麼在支援該文法的瀏覽器，如Firefox、Opera、Chrome中，能夠理解!important的優先順序，字型顏色顯示red顏色，而在IE中則顯示blue。因為IE瀏覽器不識別!important，非IE瀏覽器識別!important，且!important優先順序較高。那麼再看下面的例子，只是把CSS樣式裡面的color屬性交換下順序，Html代碼部分不變，會出現什麼樣的情況呢？

CSS

#Box {

color: blue;

color: red !important;

padding: 30px;

width : 300px;

border:1px solid pink;

}

那麼在這樣的情況下，無論是IE瀏覽器和非IE瀏覽器識別下，字型顏色都顯示red顏色。雖然IE瀏覽器不識別!important，但是它識別這句 "color: red !important;" 中的 color:red。因此在IE下，瀏覽器先識別出"color：blue"，然後識別出"color: red !important;" 中的 color:red，因此覆蓋了前面的"color:

blue"，所以最後字型顏色都顯示出來就是red了。

