您的位置：首页 > Web前端 > CSS

IE里关于CSS的优先级的bug（三）

2009-05-05 11:50 381 查看 
.orange_link .orange_link .orange_link a { color: orange; }
.orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
.orange_link a { color: orange;}

根据上次的结论：在IE6里，“a:hover”的优先级比“.orange_link a”高。说起来，a:hover还真是终极霸王的感觉～哈。

但是呢，很好玩的事情来咯。在IE6里面，“.orange_link .orange_link a”的优先级和“a:hover”一样高。请在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=gb18030" />
<title>IE里链接的伪类有bug</title>
<style type="text/css">
<!–
.orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
.green_link .green_link a { color:blue;}
–>
</style>
</head>
<body>
<div class="orange_link">
<div class="orange_link">
<a href="http:///">把鼠标移到上面来（.orange_link .orange_link a)</a>
</div>
</div>
<div class="green_link">
<div class="green_link">
<a href="http:///">把鼠标移到上面来（.green_link .green_link a)</a>
</div>
</div>
</body>
</html>

提示：您可以修改代码之后再运行

可以看到，“.green_link .green_link a”在“a:hover”后面，于是就生效了，而“.orange_link .orange_link a”在前面，就没生效。所以，它们是一个优先级的哦。

好了，最诡异的来了。我们试试看“.orange_link .orange_link .orange_link a”和“a:hover”的优先级。

<!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=gb18030" />
<title>IE里链接的伪类有bug</title>
<style type="text/css">
<!–
.orange_link .orange_link .orange_link a { color: orange;}
a:hover{ color: red;}
–>
</style>
</head>
<body>
<div class="orange_link">
<div class="orange_link">
<div class="orange_link">
<a href="http:///">把鼠标移到上面来（.orange_link .orange_link .orange_link a)</a>
</div>
</div>
</div>
</body>
</html>

提示：您可以修改代码之后再运行

结论是：IE6里，“.orange_link .orange_link .orange_link a”(三个class)的优先级比“a:hover”要高。

以上的结论在:visited和:active也成立，但是:link没有这样的bug。另外IE7和IE8beta1没有这个bug。

最后再补充一点就是，IE6中，“a#blue_link”或是“#blue_link”的优先级比a:hover要高。这点上它没有出错。

所以，在IE6里面关于链接伪类的bug真的很疯狂～～大家一定要小心。为了避免这种优先级的bug，在写CSS的时候，尽量用显式的:hover来定义样式，不要指望只用.class a就能改变a:hover。

总结一下IE6里链接伪类（:hover，:visited，:active）的优先级的bug：

a#id  或 #id
大于
.class .class .class a
大于
a:hover
等于
.class .class a
大于
.class a
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航