css important

css important

css !important作用是提高指定CSS樣式規則的套用優先權。

定義及語法

!important是CSS1就定義的語法,作用是提高指定樣式規則的套用優先權。語法格式{ cssRule !important },即寫在定義的最後面,例如:box{color:red !important;}

在CSS中,通過對某一樣式聲明! important ,可以更改默認的CSS樣式優先權規則,使該條樣式屬性聲明具有最高優先權,也就是相當於寫在最下面。

W3c的解釋

CSS企圖創造一個平衡作者和用戶之間的級層樣式表。

默認情況下,CSS規則按級層覆蓋,例如在.CSS檔案中的定義可以被html檔案中<style type="text/css"></style>里的定義覆蓋,反之不行;書寫在下面的定義可以覆蓋寫在上面的定義,反之不行。

然而,對覆蓋平衡而言,加上一個“!important”就優先於正常的CSS規則。

例:

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 18pt }

p { text-indent: 1.5em}

p { font: normal 12pt sans-serif}

p { font-size: 24pt }

在這些規則中 未被覆蓋的有:

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 24pt }

瀏覽器識別

ie7,ie8,firefox,chrome等高端瀏覽器下,已經可以識別 !important屬性, 但是IE 6.0仍然不能完全識別. important的樣式屬性和覆蓋它的樣式屬性單獨使用時(不在一個{}里),IE 6.0認為! important優先權較高,否則當含! important的樣式屬性被同一個{}里的樣式覆蓋時,IE 6.0認為! important較低!

important,最主要是為了IE 6.0瀏覽器。

案例解析

最重要的一點是:IE 6.0一直都不支持這個語法,而其他的瀏覽器都支持。因此我們就可以利用這一點來分別

給IE和其他瀏覽器不同的樣式定義,例如,我們定義這樣一個樣式:

colortest

{border:20px solid #60A179 !important;

border:20px solid #00F;

padding: 30px;

width : 300px;}

在Mozilla中瀏覽時候,能夠理解!important的優先權,因此顯示#60A179的顏色:

在IE中瀏覽時候,不能夠理解!important的優先權,因此顯示#00F的顏色:

可以看到,利用!important,我們可以針對IE和非IE瀏覽器設定不同的樣式,只要在非IE瀏覽器樣式的後面加

上!important。

ie6不完全支持!important

IE支持重定義中的!important,例如:

.yuanxin {color:#e00!important;}

.yuanxin {color:#000;}

你將會發現定義了樣式class="yuanxin"時,在IE下,字型顯示為紅色(#e00)。

但不支持同一定義中的!important。例如:

.yuanxin {color:#e00!important;color:#000;}

此時在IE6下不支持,你將會發現定義了樣式class="yuanxin"時,字型顯示為黑色(#000)。

ie6中:

/*樣式1*/

#a{width:100 !important;} /*有效*/

#a{width:50px;} /*無效*/

/*樣式2*/

#a{width:100px !important; width:50px;} /*width:100px無效,width:50px 有效*/

相關詞條

熱門詞條

聯絡我們