IE6下CSS多類選擇符優先級不起作用的bug分析及解決方法
IE6，這個前端開發的夢魘總是在你不經意的時候給你捅一刀 。這次碰到的問題是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" /
titleIE6多類選擇符優先級不起作用的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; /* 邊框藍色 */}
/style
/head
body
div id="id1" class="c1"a/div
div id="id2" class="c2 c3"b/div !--IE6下，邊框為藍色，其他瀏覽器都為紅色--
/body
/html
形如 #id1.c1 的選擇符，支持性很好 ， IE6及以上，Firefox ， opera，safari等瀏覽器都支持 。形如 .c2.c3 的選擇符，在IE6下不支持 ， 后一個類名會覆蓋前一個類名，即直接識別為 .c3 ，也就是說 ， IE6下這種類組合的優先級不如單個類 。
所以開發中用多類來組合實現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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title選擇符測試/titlestyle type="text/css"div{display:block;width:400px;height:200px;}#first.son{background:#ccc;}.second.son{border:1px solid red;}/style/headbody div id="first" class="son first"a /div div id="second"class="son second"b /div/body/html
ffcod = delpost.runcode3 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode3 .value = https://www.questions.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
形如#first.son的選擇符，支持性很好，ie6及以上 ， ff,opera,safari等瀏覽器都支持 。
形如.second.son的選擇符，在ie6下不支持，后一個類名會覆蓋前一個類名 ， 即直接識別為.son
其實可以利用第二條情況，作為一個針對ie6的hack來使用：
.xxx.son{} 只要.xxx部分是一個不存在的類名 。就可以屏蔽ie6之外的瀏覽器 。只對ie6下的.son有效 。
這個hack的效果同 selector{ _property:value; } 大體一致 。
