<a>标签的伪类书写顺序有关问题
日期：2014-05-17 浏览次数：20990 次
【分享】<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
希望对大家有帮助：）
------解决方案--------------------
抢沙发~~~
呃……楼主发的这个也太简单了吧
看看CSS2.1的6.4.3节再来忽悠，这是特异性计算问题，IE6的伪类就没参与计算，因此出现这个鬼毛病的说。
------解决方案--------------------
我了个去，楼主说的比我还专业呢！
佩服！佩服！
楼主继续说说这个复杂的问题吧。偶不知道的说……
------解决方案--------------------
不错 赞一个
------解决方案--------------------
不错 赞一个
------解决方案--------------------
楼上两个明显灌水刷分！
强烈鄙视ing……
------解决方案--------------------
UP~~~~~~~
------解决方案--------------------
see see
------解决方案--------------------
路过看看~~~
曾经在调试自己的网页是发现过一个问题，链接的文字只有在 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
希望对大家有帮助：）
------解决方案--------------------
抢沙发~~~
呃……楼主发的这个也太简单了吧
看看CSS2.1的6.4.3节再来忽悠，这是特异性计算问题，IE6的伪类就没参与计算，因此出现这个鬼毛病的说。
------解决方案--------------------
我了个去，楼主说的比我还专业呢！
佩服！佩服！
楼主继续说说这个复杂的问题吧。偶不知道的说……
------解决方案--------------------
不错 赞一个
------解决方案--------------------
不错 赞一个
------解决方案--------------------
楼上两个明显灌水刷分！
强烈鄙视ing……
------解决方案--------------------
UP~~~~~~~
------解决方案--------------------
see see
------解决方案--------------------
路过看看~~~
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
