風格表有三種來源:作者定義的,用戶指定的,與展現程式的預設值。預設的串聯規則是:作者定義的風格表會取代用戶定義的風格表,而展現程式的預設值位階最低。可以在作者的風格表與用戶的風格表中使用
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:
- 風格用法:
<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 是紅色。