IE6下CSS多類選擇符優(yōu)先級不起作用的bug分析及解決方法
發(fā)布時間：2013-01-23 14:28:54 作者：佚名 
我要評論
我要評論IE6，這個前端開發(fā)的夢魘總是在你不經(jīng)意的時候給你捅一刀,在ie6環(huán)境下CSS多類選擇符優(yōu)先級不起作用，多么的令人氣憤啊，經(jīng)過測試：IE6下這種類組合的優(yōu)先級不如單個類， 感興趣的朋友可以了解下啊
IE6，這個前端開發(fā)的夢魘總是在你不經(jīng)意的時候給你捅一刀。這次碰到的問題是CSS多類選擇符的問題。IE6不支持，我們來看一段這樣簡單的代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6多類選擇符優(yōu)先級不起作用的bug</title>
<style type="text/css">
div{display:block;width:400px;height:200px;}
#id1.c1{background:#ccc;}
.c2.c3{border:1px solid red; /* 邊框紅色 */}
.c3{border:1px dashed #00F; /* 邊框藍(lán)色 */}
</style>
</head>
<body>
<div id="id1" class="c1">a</div>
<div id="id2" class="c2 c3">b</div> <!--IE6下，邊框為藍(lán)色，其他瀏覽器都為紅色-->
</body>
</html>
形如 #id1.c1 的選擇符，支持性很好，IE6及以上，F(xiàn)irefox，opera，safari等瀏覽器都支持。形如 .c2.c3 的選擇符，在IE6下不支持，后一個類名會覆蓋前一個類名，即直接識別為 .c3 ，也就是說，IE6下這種類組合的優(yōu)先級不如單個類。
所以開發(fā)中用多類來組合實現(xiàn)css效果的時候，注意IE6的這個問題。最好的方法就是，不要用這種類組合的形式。
實例二：
提示：您可以先修改部分代碼再運行
形如#first.son的選擇符，支持性很好，ie6及以上，ff,opera,safari等瀏覽器都支持。
形如.second.son的選擇符，在ie6下不支持，后一個類名會覆蓋前一個類名，即直接識別為.son
其實可以利用第二條情況，作為一個針對ie6的hack來使用：
.xxx.son{} 只要.xxx部分是一個不存在的類名。就可以屏蔽ie6之外的瀏覽器。只對ie6下的.son有效。
這個hack的效果同 selector{ _property:value; } 大體一致。
復(fù)制代碼
代碼如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE6多類選擇符優(yōu)先級不起作用的bug</title>
<style type="text/css">
div{display:block;width:400px;height:200px;}
#id1.c1{background:#ccc;}
.c2.c3{border:1px solid red; /* 邊框紅色 */}
.c3{border:1px dashed #00F; /* 邊框藍(lán)色 */}
</style>
</head>
<body>
<div id="id1" class="c1">a</div>
<div id="id2" class="c2 c3">b</div> <!--IE6下，邊框為藍(lán)色，其他瀏覽器都為紅色-->
</body>
</html>
形如 #id1.c1 的選擇符，支持性很好，IE6及以上，F(xiàn)irefox，opera，safari等瀏覽器都支持。形如 .c2.c3 的選擇符，在IE6下不支持，后一個類名會覆蓋前一個類名，即直接識別為 .c3 ，也就是說，IE6下這種類組合的優(yōu)先級不如單個類。
所以開發(fā)中用多類來組合實現(xiàn)css效果的時候，注意IE6的這個問題。最好的方法就是，不要用這種類組合的形式。
實例二：
提示：您可以先修改部分代碼再運行
形如#first.son的選擇符，支持性很好，ie6及以上，ff,opera,safari等瀏覽器都支持。
形如.second.son的選擇符，在ie6下不支持，后一個類名會覆蓋前一個類名，即直接識別為.son
其實可以利用第二條情況，作為一個針對ie6的hack來使用：
.xxx.son{} 只要.xxx部分是一個不存在的類名。就可以屏蔽ie6之外的瀏覽器。只對ie6下的.son有效。
這個hack的效果同 selector{ _property:value; } 大體一致。
相關(guān)文章
- 作為一個Web開發(fā)者，掌握必要的前臺技術(shù)也是很重要的特別是CSS選擇器的優(yōu)先級問題，為了廣大web愛好者可以更好的解決問題，這里就CSS選擇器的優(yōu)先級問題做了一些總結(jié)2013-08-01
- 大家都知道，CSS的中文名叫做層疊樣式表，而CSS在控制樣式的時候，有三種引入方式,這里簡單介紹下CSS控制樣式的三種方式2013-07-22
CSS優(yōu)先級的相關(guān)知識詳細(xì)介紹
所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，既然樣式有優(yōu)先級，那么就會有一個規(guī)則來約定這個優(yōu)先級，而這個“規(guī)則”就是本次所需要講的重點2013-04-22- 所謂CSS優(yōu)先級，即是指CSS樣式在瀏覽器中被解析的先后順序，CSS是層疊樣式表（Cascading Style Sheets）的簡稱，我們能通過CSS為文檔設(shè)置豐富且易于修改的外觀2013-04-19
- css樣式優(yōu)先級是按照樣式表中出現(xiàn)順序還是按照元素中class或者id值的聲明順序呢，這個問題貌似一直存在我們身邊卻一直無從選擇，接下來用實例為大家說明下，到底哪個高點，2013-03-14
CSS層疊樣式表之CSS解析機制的優(yōu)先級及樣式覆蓋問題探討
多重樣式（Multiple Styles）： 如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應(yīng)用于同一個元素，就是使多重樣式的情況.有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則2013-02-01CSS優(yōu)先級和!important與IE6的BUG討論及解決方案
本來我對他誰的ie6不支持!important也沒什么異議，可是正好在前幾天正好用個這個!important屬性解決了一個樣式優(yōu)先級的問題，而且是支持ie6的，這是為什么呢？到底ie6支不2013-01-23- css樣式的優(yōu)先級是一個龐雜的知識點，我甚至覺得它的龐雜可以與“浮動”以及“框模型”相提并論,今天就利用點時間把我所了解的寫下來，大家共同進步2013-01-11
- css基礎(chǔ)選擇器有標(biāo)簽選擇器、類選擇器、id選擇器、通用選擇器,本文將深入介紹css選擇器優(yōu)先級,這會給正在解決優(yōu)先級問題的朋友，帶來些許幫助2012-12-04
- CSS的調(diào)用方式一共有4種，分別是：行內(nèi)樣式，內(nèi)嵌式，link鏈接式，@import導(dǎo)入式，在同級的前提下，我們可以按樣就近原則來理解他們的優(yōu)先級，則越前定義的樣式，會被后面2010-07-23