一、css的優先級
今天有人跟我說csshack中用!important來區分ie6,因為ie6不支持!important,是的在很早以前我也是用過這種方法寫hack,但是后來就基本不用了。本來我對他誰的ie6不支持!important也沒什么異議,可是正好在前幾天正好用個這個!important屬性解決了一個樣式優先級的問題,而且是支持ie6的,這是為什么呢?到底ie6支不支持!important呢?
首先我們來看看!important這個屬性的作用:!important是用來提升樣式優先級的,我們知道樣式是有優先級的。
我們先看看css的優先級的幾個基本的規則:
ID選擇器(形如#id{})>類選擇器(形如.class{})>標簽選擇器(形如body{}或者*{}),也就是ID選擇器,類選擇器,標簽選擇器中,ID選擇器的優先級最高,標簽選擇器最低;選擇器越具體優先級就越高,也就是
.classA.classB.classC{font-size:25px;}
.classB.classC{font-size:18px}
.classC{font-size:12px;}
這里.classA.classB.classC的優先級最高,.classC的優先級最低;
•在同一個級別的情況下,最后指定的規則優先級就越高,也就是我們通常說的就近原則;
•html中標簽的style的屬性都高于css文件中的選擇器樣式;
•標有”!important”的規則有最高優先級。
我們可以利用!important使該樣式優先級最高,例如:
#idA{font-size:20px}
.classA{font-size:12px;}
HTML代碼:我要20像素的字
#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代碼:我要12像素的字
這樣.classA{font-size:12px!important;}這個樣式就被引用了。
這種方法在優先級低的樣式被優先級高的樣式覆蓋,又想引用優先級低的樣式時候非常有用!
二、!important在ie6下的一個BUG
還是看這一段代碼,
#idA{font-size:20px}
.classA{font-size:12px!important;}
HTML代碼:我要12像素的字
大家可以在IE6下測試一下,文字是12像素的,也就是.classA{font-size:12px!important;}被引用了,這證明IE6是支持!important的。但是csshack中用!important來區分ie6,說ie6不支持!important又是怎么回事呢?
原來ie6下,在同一個選擇器樣式(即同一個大括號里面)下!important是無效的,例如:
.classA{font-size:68px!important;font-size:12px}
HTML代碼:我要12像素的字
這里在ie6下是12像素的字,而其他瀏覽器下是68px的字,當然我們把樣式改一下,!important放在后面,即
.classA{font-size:12px;font-size:68px!important;}
,那么ie6下和其他瀏覽器一樣也是68px的字。也就是在同一個選擇器樣式(即同一個大括號里面)下!important被ie6徹底的無視了。
==============以下2009年8月1日更新==============
新聞熱點
疑難解答