a标签的伪类书写顺序--HTML/WML/CSS兼容--编程设计网

=波波日志 > HTML/WML/CSS兼容 > a标签的伪类书写顺序=

[转]a标签的伪类书写顺序

问题描述
　　曾经在调试自己的网页是发现过一个问题，链接的文字只有在 IE6 下当鼠标移到上面的时候会变色，在 IE7、IE8 和其它浏览器里都不变色，感觉很奇怪。

先来看一下我原来的代码：

-HTML

<!DOCTYPE html>
<style type="text/css">
a:hover{color:red;}
a:link{color:black;}
a:visited{color:blue;}
a:active{color:green;}
</style> 
<a href="#">test test test</a>

　　页面为标准模式(声明 DOCTYPE 为 <!DOCTYPE html> 即可，稍后会在“浏览器兼容性”系列中详细介绍浏览器模式)。

　　以上代码中，我的本意是想让文字在没有访问 (:link) 的时候是黑色，在悬停在文本上方 (:hover) 时是红色，点击到文本上方未释放鼠标时 (:active) 是绿色，而访问过 (:visited) 以后就变成了蓝色。

　　但是，事与愿违，在 IE6 下，当鼠标移到链接上时，文字会变红，而其他浏览器中都还是黑色。

　　相信大家也曾经遇到过类似的问题吧。

　　后来，查了一下W3C标准-- 5.11.2 和 5.11.3 才知道，原来<a>标签的伪类样式定义是有顺序要求的。

　　简单的介绍一下A 标签的4个伪类：
1. ':link' ：适用于未被访问的链接；
2. ':visited' ：适用于已经访问过的链接；
3. ':hover' ：在可视化客服端上，适用于光标（鼠标指针）指向一个元素，但还未激活它时；
4. ':active' ：适用于一个元素被用户激活时。

　　W3C制定的CSS21规范中指出：这四个伪类的声明顺序应该是：':link'、':visited'、':hover'、':active'。A:hover必须放置在A:link和A:visited之后，否则将隐藏A:hover内定义的相同规则。同理，A:active应在A:hover之后，否则A:active中的相同规则将被隐藏。

　　我想，标准这样制定的原因应该就在于浏览器解释CSS时遵循的“就近原则”。

　　举例来说：（测试结果中不包含IE6）

　　我想让未访问链接颜色为黑色，访问过的链接为蓝色，当鼠标移到链接上面的时候变为红色，就像我上面的代码里写的那样。

　　第一种情况：我定义的顺序是 a:hover、a:link、a:visited，这时会发现：把鼠标放到链接上时，它不会变成红色。

　　第二种情况：定义顺序变做 a:visited、a:hover、a:link，把鼠标放到未访问过的链接上时，它并不变成红色，只有放在已访问的链接上，链接才会变红。

　　第三种情况：我把CSS定义顺序调整为：a:link、a:visited、a:hover，这时，无论你鼠标经过的链接有没有被访问过，它都会变成红色啦。

　　这是因为，一个鼠标经过的未访问链接同时拥有 a:link、a:hover 两种属性，所以在第一种情况下，a:link 离它最近，所以它优先满足 a:link，而放弃 a:hover 的重复定义。

　　而在最后一种情况下，无论链接有没有被访问过，它首先要检查是否符合 a:hover 的标准（即是否有鼠标悬浮在上面），满足，则变成红色，不满足，则继续向上查找，一直找到满足条件的定义为止。

　　上面的结果是对 IE7/IE8、火狐、Chrome 和苹果的 Safari 测试得到的。IE6 没有按照标准做，故它在这三种情况下，当鼠标悬浮到链接上的时候链接都会变红。

　　推荐大家以后按照 L-V-H-A 的顺序来定义 <a> 标签的伪类样式。这样在各个浏览器里就都一样了。

　　为了好记，可以记这两个词：LOVE--HATE

　　希望对大家有帮助：）
来源：http://topic.csdn.net/u/20100630/14/7223ADB9-3D4B-4869-9EAA-A424BADEAEAC.html

类别：HTML/WML/CSS兼容　作者：转载　日期：2010-06-30　【评论：0　阅读：】　

上一篇：样式的特性及优先级别　
下一篇：关于IE的layOut bug

暂时没有评论！

发表留言