2009/01/21

!important

!important

風格表有三種來源:作者定義的,用戶指定的,與展現程式的預設值。預設的串聯規則是:作者定義的風格表會取代用戶定義的風格表,而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用 !important,改變預設的串聯規則。依據 CSS2 標準,如果用戶的風格表中,有使用 !important 的規則,則其優先權會高過作者的風格表,即便作者的風格表中有加上 !important。其語法是:

css 特徵:值 !important;

  • 風格用法:

    <style type='text/css'>
    .imp  {color:red !important;}
    </style>
    <div class=imp style='color:green'>
    重要
    <i style='color:blue'>不重要</i>
    </div>

  • 執行結果:

    重要 不重要
  • 上例中,紅色優先權蓋過綠色。

CSS hack 1:IE6 及舊版 IE,處理 !important 時出現一點小問題。如果在同一個風格定義區塊中先宣告此行:

特徵一 : 值一 !important;

之後相同的 "特徵一" 又宣告一次,

特徵一 : 值二;

這會導致第二個宣告蓋過第一個宣告。而 IE7 及其它瀏覽器,會以第一個宣告優先;這被設計師用來分別 IE6 與其它瀏覽器。下面的範例依循兩個原則:(一)後宣告的值會蓋過先宣告的值。(二)解讀失敗的宣告會被忽略。範例中還用到 *,*property IE 解讀為 property,其它瀏覽器視為錯誤。

  • 風格用法:

    <style type='text/css'>
    .hack1 {color:red;                /* Firefox, Safari, Chrome */
            *color:green !important;  /* IE7                     */
            *color:blue;              /* IE6 以下                */
           }
    </style>
    <div class=hack1>
    CSS hack 1:此段文字,在 IE6 是藍色;在 ??? 是綠色;在 Firefox, Safari, Chrome 是紅色。
    </div>

  • 執行結果:

    CSS hack 1:此段文字,在 IE6 是藍色;在 ??? 是綠色;在 Firefox, Safari, Chrome 是紅色。

CSS hack 2:!important! 在 IE7(及以下版本), Safari, Chrome 依然會被解讀為 !important;但是在 Firefox 會認出此錯誤,而忽略其設定。

  • 風格用法:

    <style type='text/css'>
    .hack2 {color:red !important ;    
            color:green !important! ; 
           }
    </style>
    <div class=hack2 style='color:blue'>
    CSS hack 2:此段文字,在 IE6, Safari, Chrome 是綠色;在 Firefox 是紅色。
    </div>

  • 執行結果:

    CSS hack 2:此段文字,在 IE6, Safari, Chrome 是綠色;在 Firefox 是紅色。