CSS優(yōu)先級和!important與IE6的BUG發(fā)布者:本站 時間:2020-05-16 09:05:22
今天有人跟我說css hack中用!important來區(qū)分ie6,因為ie6不支持!important,是的在很早以前我也是用過這種方法寫hack,但是后來就基本不 用了。本來我對他誰的ie6不支持!important也沒什么異議,可是正好在前幾天正好用個這個!important屬性解決了一個樣式優(yōu)先級的問 題,而且是支持ie6的,這是為什么呢?到底ie6支不支持!important呢?
首先我們來看看!important這個屬性的作用:!important是用來提升樣式優(yōu)先級的,我們知道樣式是有優(yōu)先級的。
我們先看看css的優(yōu)先級的幾個基本的規(guī)則:
ID選擇器(形如#id{}) > 類選擇器(形如.class{}) > 標簽選擇器(形如body{}或者*{}),也就是ID選擇器,類選擇器,標簽選擇器中,ID選擇器的優(yōu)先級最高,標簽選擇器最低;選擇器越具體優(yōu)先級就越高,也就是
1 .classA .classB .classC{font-size: 25px;}
2 .classB .classC{font-size: 18px}
3 .classC { font-size: 12px; }
這里.classA .classB .classC的優(yōu)先級最高,.classC的優(yōu)先級最低;
? 在同一個級別的情況下,最后指定的規(guī)則優(yōu)先級就越高,也就是我們通常說的就近原則;
? html中標簽的style的屬性都高于css文件中的選擇器樣式;
? 標有”!important”的規(guī)則有最高優(yōu)先級。
我們可以利用!important使該樣式優(yōu)先級最高,例如:
1 #idA{font-size: 20px}
2 .classA{ font-size: 12px;}
HTML代碼:我要20像素的字
1 #idA{ font-size:20px }
2 .classA{ font-size: 12px !important; }
HTML代碼:我要12像素的字
這樣.classA{ font-size: 12px !important; }這個樣式就被引用了。
這種方法在優(yōu)先級低的樣式被優(yōu)先級高的樣式覆蓋,又想引用優(yōu)先級低的樣式時候非常有用!
二 !important在ie6下的一個BUG
還是看這一段代碼,
1 #idA{ font-size: 20px}
2 .classA{ font-size: 12px !important; }
HTML代碼:我要12像素的字
大家可以在IE6下測試一下,文字是12像素的,也就是.classA{ font-size: 12px !important; }被引用了,這證明IE6是支持!important的。但是css hack中用!important來區(qū)分ie6,說ie6不支持!important又是怎么回事呢?
原來ie6下,在同一個選擇器樣式(即同一個大括號里面)下!important是無效的,例如:
1 .classA{ font-size: 68px !important; font-size: 12px }
HTML代碼:我要12像素的字
這里在ie6下是12像素的字,而其他瀏覽器下是68px的字,當然我們 把樣式改一下,!important放在后面,即
1 .classA{ font-size: 12px; font-size: 68px !important; }
,那么ie6下和其他瀏覽器一樣也是68px的字。也就是在同一個選擇器樣式(即同一個大括號里面)下!important被ie6徹底的無視了
==============以下2009年8月1日更新==============
昨天在紫鼠的博客上也看到了關于!important的文章,說IE8在 同一個選擇器樣式(即同一個大括號里面)下對!important的解析也是和IE6一樣的,可是我測試的情況是IE8和IE6是不一樣的,并留了言,今 天我們討論了這個問題,確實他寫的他寫的代碼IE8和IE6對!important的解析是一樣的。經(jīng)過比較發(fā)現(xiàn),他代碼上沒有DTD的聲明,就是 html代碼上面的這一句:“”,神啊,在沒有DTD的聲明的情況下,在同一個選擇器樣式(即同一個大括號里面)下,IE6,IE7,IE8對!important的解析都是無效的。還有只要有聲明文檔類型的不管是html4,xhtml1.o,還有html5(“”),除去ie6有上面說的BUG外其他都是正常的。
選擇我們,優(yōu)質(zhì)服務,不容錯過
1. 優(yōu)秀的網(wǎng)絡資源,強大的網(wǎng)站優(yōu)化技術,穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設經(jīng)驗,優(yōu)秀的技術和設計水平,更放心
3. 全程省心服務,不必擔心自己不懂網(wǎng)絡,更省心。
------------------------------------------------------------
24小時聯(lián)系電話:021-58370032