IE6下CSS多類選擇符優先級不起作用的bug分析及解決方法

2024-07-11 08:29:03

字體：大中小

來源：轉載

供稿：網友

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" />
<title>IE6多類選擇符優先級不起作用的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> 
</body>
</html>

形如 #id1.c1 的選擇符，支持性很好，IE6及以上，Firefox，opera，safari等瀏覽器都支持。形如 .c2.c3 的選擇符，在IE6下不支持，后一個類名會覆蓋前一個類名，即直接識別為 .c3 ，也就是說，IE6下這種類組合的優先級不如單個類。

所以開發中用多類來組合實現css效果的時候，注意IE6的這個問題。最好的方法就是，不要用這種類組合的形式。
實例二：

提示：您可以先修改部分代碼再運行

形如#first.son的選擇符，支持性很好，ie6及以上，ff,opera,safari等瀏覽器都支持。
形如.second.son的選擇符，在ie6下不支持，后一個類名會覆蓋前一個類名，即直接識別為.son

其實可以利用第二條情況，作為一個針對ie6的hack來使用：
.xxx.son{} 只要.xxx部分是一個不存在的類名。就可以屏蔽ie6之外的瀏覽器。只對ie6下的.son有效。

上一篇：CSS中背景的Linear Gradients(線性漸變)應用

下一篇：css3動畫事件—webkitAnimationEnd與計時器time事件