如题:
不废话直接上代码
<html>
<head>
<style>
div{width:30px;height:30px;cursor: pointer;float:left;left; }
#moveLeft{background:no-repeat scroll left bottom #0000ff;}
#moveLeft.hover{background-color:#ff0000;}
#moveLeft.disable{background-color:#00ff00;}
</style>
<body>
<div id="moveLeft"></div>
<div class="disable" id="moveLeft"></div>
<div class="hover" id="moveLeft"></div>
<div class="hover disable" id="moveLeft"></div>
<div class="disable hover" id="moveLeft"></div>
</body>
</html>
火狐VS IE6 对比图
对比第二 和第三个
<div class="disable" id="moveLeft"></div>
<div class="hover" id="moveLeft"></div>
发现IE6还是支持#id.class 这种选择器格式的。但是从上面的差异中可以发现在IE6中相同的ID 只能定义一次这种格式,多次定义以第一次为准。并不会产生我们想象的覆盖现象。
而火狐不愧为高级的浏览器
对比地4个和第5个DIV
<div class="hover disable" id="moveLeft"></div>
<div class="disable hover" id="moveLeft"></div>
容易发现在一个元素有多个Class的时候,火狐跟IE6去选择样式的优先级是不一样的
IE6下 Class=“A B”中 优先级会参照当前使用的顺序,谁后使用谁优先级高,所以 B出现在A的后面, B的优先级比A高会覆盖A中重复的CSS样式,
火狐中Class="A B"的情况下 优先级会参照<sttyle>样式表中A{}和B{}的定义的先后顺序,相同类型的CSS选择器下谁后定义谁优先级高。显然 disable 是在hover后面定义的,所以火狐中最后2个DIV显示的颜色一样
一上只是个人研究的经验总结,并没有关于浏览器核心渲染方面的理论知识和文档材料作为佐证。
有其他见解的同学们欢迎指正!
欢迎大家拍砖!