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