定義及語法
!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 有效*/