<a>标签的伪类书写顺序问题(转载)

jdhh_hcm

浏览: 11170 次
性别:
来自: 杭州

最近访客更多访客>>

走丢的门牙

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2011-09 ( 9)
更多存档...

博客分类：

浏览器兼容性问题(转载)

浏览器兼容性问题

向作者致敬！

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

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

HTML code


<!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

希望对大家有帮助

分享到：

IE6 中 A 标签 hover 伪类特殊性过高的问 ... | 你的元素居中对齐了吗？——关于 'text-ali ...

2011-09-30 11:32
浏览 974
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论