CSS选择器.aa.bb类型在IE6下的Bug

页面结构:

<div class="box">box</div>
<div class="box chk">box chk red</div>
<div class="box2">box2</div>
<div class="box2 chk">box2 chk #CCC</div>
<div class="box3">box3</div>
<div class="box3 chk">box3 chk blue</div>

demo一:

.box,.box2,.box3{color:#000000;}
.box.chk{color:red;}
.box2.chk{color:#CCCCCC;}
.box3.chk{color:blue;}

IE6下效果:

CSS选择器.aa.bb类型在IE6下的Bug_第1张图片

而在IE6下最后的.box3.chk会覆盖前面的样式,所有包含chk样式名的文字都表现为蓝色;当把最后一条.box2.chk{color:blue;}改成.chk{color:blue;}后同样会覆盖前面的样式,而它也被后面的box3.chk覆盖。


demo二:

.box,.box2,.box3{color:#000000;}
.chk.box{color:red;}
.chk.box2{color:#CCCCCC;}
.chk.box3{color:blue;}

IE6下效果:

CSS选择器.aa.bb类型在IE6下的Bug_第2张图片

IE6下.box,.box2,.box3会被后面包含.chk的样式覆盖,而.chk.box3并没有覆盖.chk.box2、.chk.box的样式。


demo三:

.box,.box2,.box3{color:#000000;}
.chk.box{color:red;}
.box2.chk{color:#CCCCCC;}
.chk.box3{color:blue;}

IE6下效果:



IE6下总结:
1、.aa位于.aa.bb前面时显示各自相应的样式,.aa位于后面时会覆盖.aa.bb的样式
2、.bb与.aa.bb权重一样,由所在位置顺序决定显示效果,后面的会覆盖前面的样式
3、.aa.bb或.bb.aa都会被后面的.aa或.cc.aa覆盖

你可能感兴趣的:(css,IE,Class,div)