我在跨不同浏览器测试样式表时遇到了这个问题,包括IE6(是的,我知道..)
<head> <style> a:link,a:visited,a:hover,a:active { font-weight: bold; color: #000; text-decoration: underline } .myclass a { color: red; text-decoration: none; } </style> </head> <body> <p>This is a <a href="1">test</a></p> <div class="myclass"> <p>This is a <a href="2">test</a></p> </div> </body>
结果:
>在IE6中,.myclass规则仅适用于未访问的链接状态
>在其他浏览器(FF,Chrome)中,.myclass规则适用于所有链接状态
我认为IE6是错误的,没有指定伪类的.myclass a应该适用于所有链接状态.但是我遇到了this SO question,它说a相当于a:link.这将符合IE6中的行为.但是我找不到任何证实这一点的官方参考.
哪一个是对的?
更新:
如评论中所述,上述问题的已接受答案已经更新.
解决方法
其他浏览器是对的; IE6错了.
选择器a应该与任何< a>匹配.元素,而a:链接仅匹配< a>未访问的超链接元素(HTML 4文档类型将超链接定义为带有href属性的< a>元素).在任一规范中都没有说明a应该自动转换为:link,反之亦然.
由于没有这样的翻译,你的两个CSS规则具有同样特定的选择器(你的类选择器与你的每个伪类具有相同的特异性).因此,您的第二条规则应该覆盖任何< a>的第一条规则. div.myclass中的元素,无论它们的链接状态如何,从而使它始终为红色且没有文本修饰.
顺便说一句,当您使用< a>进行测试时,IE7也无法应用font-weight:bold样式. div.myclass中的元素不是链接,即使它应该是因为第二个规则中没有重写字体权重样式:
<div class="myclass"> <p>This is a <a href="2">test</a></p> <p>This is a <a>test</a></p> <!-- does not bold on hover in IE7! --> </div>