=波波日志 > HTML/WML/CSS兼容/XML > a标签的伪类书写顺序=
[转]a标签的伪类书写顺序
问题描述
曾经在调试自己的网页是发现过一个问题，链接的文字只有在 IE6 下当鼠标移到上面的时候会变色，在 IE7、IE8 和其它浏览器里都不变色，感觉很奇怪。
先来看一下我原来的代码：
页面为标准模式(声明 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
曾经在调试自己的网页是发现过一个问题，链接的文字只有在 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>
<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兼容/XML 作者：转载 日期：2010-06-30 【评论：0】
暂时没有评论！
发表留言
百度赞助
同类热门博文
- ·IE对CSS样式表的限制..
- ·HTML 5 WebSocket J..
- ·html5 websocket 通..
- ·Firefox上传文件获取..
- ·javascript获取file..
- ·URL转码方法及不能被..
- ·IE/Firefox/W3C浏览..
- ·CLIP: rect 是什么？
博格Tag
- flash/flex/fcs/AIR(752)
- Asp.Net/C#/WCF(595)
- 操作系统及应用软件(376)
- JavaScript/Ajax(330)
- SQL及数据库(134)
- 黑客技术(115)
- Asp/VBScript(111)
- HTML/WML/CSS兼容/XML(102)
- PHP/apache/Perl(96)
- 网站排名及优化(92)
- 其他(75)
- 个人日志(66)
- lucene.net/分词技术(33)
- 计算机网络(26)
- 机械重工(26)
- C#设计模式(24)
- Google Maps开发(17)
- 日语学习(15)
- Canvas/VML/SVG(13)
- linux(11)
- 游戏开发(8)
- 正则表达式(5)
- Jsp/Java(4)
最新博文
随机博文