一 CSS的優先級
今天有人跟我說CSS hack中用!important來區分ie6,因為ie6不支持!important,是的在很早以前我也是用過這種方法寫hack,但是後來就基本不用了。本來我對他誰的ie6不支持!important也沒什麼異議,可是正好在前幾天正好用個這個!important屬性解決了一個樣式優先級的問題,而且是支持ie6的,這是為什麼呢?到底IE6支不支持!important呢?
首先我們來看看!important這個屬性的作用:!important是用來提升樣式優先級的,我們知道樣式是有優先級的。
我們先看看CSS的優先級的幾個基本的規則:
我們可以利用!important使該樣式優先級最高,例如:
CSS代碼:
#idA{font-size:20px}
.classA{ font-size: 12px; }
Html代碼:
<div id=“idA” class=“classA”>我要20像素的字</div>
我們知道根據上面的規則可以看出#idA{font-size:20px}的樣式將被引用,那我們如果要12像素的字呢?
CSS代碼:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
Html代碼:
<div id=“idA” class=“classA”>我要12像素的字</div>
這樣.classA{ font-size: 12px !important; }這個樣式就被引用了。
這種方法在優先級低的樣式被優先級高的樣式覆蓋,又想引用優先級低的樣式時候非常有用!
二 !important在IE6下的一個BUG
還是看這一段代碼,
CSS代碼:
#idA{font-size:20px}
.classA{ font-size: 12px !important; }
Html代碼:
<div id=“idA” class=“classA”>我要12像素的字</div>
大家可以在IE6下測試一下,文字是12像素的,也就是.classA{ font-size: 12px !important; }被引用了,這證明IE6是支持!important的。但是CSS hack中用!important來區分ie6,說IE6不支持!important又是怎麼回事呢?
原來IE6下,在同一個選擇器樣式(即同一個大括號裡面)下!important是無效的,例如:
CSS代碼:
.classA{ font-size: 68px !important; font-size: 12px }
Html代碼:
<div class=“classA”>我要12像素的字</div>
這裡在ie6下是12像素的字,而其他浏覽器下是68px的字,當然我們把樣式改一下,!important放在後面,即.classA{ font-size: 12px;font-size: 68px !important; },那麼IE6下和其他浏覽器一樣也是68px的字。也就是在同一個選擇器樣式(即同一個大括號裡面)下!important被IE6徹底的無視了。
==============以下2009年8月1日更新==============
昨天在紫鼠的博客上也看到了關於!important的文章,說IE8在同一個選擇器樣式(即同一個大括號裡面)下對!important的解析也是和IE6一樣的,可是我測試的情況是IE8和IE6是不一樣的,並留了言,今天我們討論了這個問題,確實他寫的他寫的代碼IE8和IE6對!important的解析是一樣的。經過比較發現,他代碼上沒有DTD的聲明,就是html代碼上面的這一句:“<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd”>”,神啊,在沒有DTD的聲明的情況下,在同一個選擇器樣式(即同一個大括號裡面)下,IE6,IE7,IE8對!important的解析都是無效的。還有只要有聲明文檔類型的不管是html4,xhtml1.o,還有Html5(“<!DOCTYPE Html>”),除去IE6有上面說的BUG外其他都是正常的。