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

先来看一下我原来的代码:
<!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.25.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

希望对大家有帮助:)
...全文
3104 63 打赏 收藏 转发到动态 举报
写回复
用AI写文章
63 条回复
切换为时间正序
请发表友善的回复…
发表回复
乐观小无赖 2011-07-07
  • 打赏
  • 举报
回复
蹭点分,顺道回忆下
xjinza 2010-09-16
  • 打赏
  • 举报
回复
不错不错
KK3K2005 2010-07-22
  • 打赏
  • 举报
回复
[Quote=引用 51 楼 mochimo 的回复:]

引用 50 楼 xiaoyuan402 的回复:

顺序应该是:a:link、a:visited、a:hover、a:active


人家讲的就是为啥要用LVHA这个顺序。

要知其然还知其所以然,懂不。
[/Quote]

不就是个出牌顺序 哪有什么所以 然 的
yizhenjianxue2010 2010-07-04
  • 打赏
  • 举报
回复
luguo kankan ha
changlander 2010-07-04
  • 打赏
  • 举报
回复
说的挺好 平常也用 但是没看过这么深入的
!!!!!!!!!!!!!!
lwlongyan 2010-07-03
  • 打赏
  • 举报
回复
学习学习
xia595 2010-07-03
  • 打赏
  • 举报
回复
有没有哪位高手上传点DW的考试复习题目
luzhen328 2010-07-03
  • 打赏
  • 举报
回复
拿分拿分
xiaoyuan402 2010-07-02
  • 打赏
  • 举报
回复
顺序应该是:a:link、a:visited、a:hover、a:active
tizll521 2010-07-02
  • 打赏
  • 举报
回复
很老的问题了
mochimo 2010-07-02
  • 打赏
  • 举报
回复
[Quote=引用 50 楼 xiaoyuan402 的回复:]

顺序应该是:a:link、a:visited、a:hover、a:active
[/Quote]

人家讲的就是为啥要用LVHA这个顺序。

要知其然还知其所以然,懂不。
raaaazer 2010-07-01
  • 打赏
  • 举报
回复
喷子统统滚蛋

LZ发这个有什么错吗
lijianfan 2010-07-01
  • 打赏
  • 举报
回复
来曾分的!
java_guoenzhou 2010-07-01
  • 打赏
  • 举报
回复
高见!
ka_wa_yi12 2010-07-01
  • 打赏
  • 举报
回复
说的挺好 平常也用 但是没看过这么深入的
  • 打赏
  • 举报
回复
其实都是“遇和未遇、知与不知”的事情,谈不到难易深浅。会者不难,难者不会。
hjl13960 2010-07-01
  • 打赏
  • 举报
回复
一直以来都没多注意这个
sll1234 2010-07-01
  • 打赏
  • 举报
回复
334
sll1234 2010-07-01
  • 打赏
  • 举报
回复
hhhe
dihaokelou 2010-07-01
  • 打赏
  • 举报
回复
[Quote=引用 16 楼 mochimo 的回复:]
引用 11 楼 lovesiyile 的回复:

csdn果真高手云集,推荐这么深奥的帖子。


我嘞个去,这个深奥个鸟了……
[/Quote]
你就知道喷人,你深奥你也发个符合深奥身份的帖子出来看看。
加载更多回复(36)

5,006

社区成员

发帖
与我相关
我的任务
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
  • 跨浏览器开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧