在IE6中链接样式行为 [英] Link styling behaviour in IE6
问题描述
在不同的浏览器测试样式表时遇到这个问题，包括IE6（是的，我知道..）
< head>
< style>
a：link，a：visited，a：hover，a：active {font-weight：bold;颜色：＃000; text-decoration：underline}
.myclass a {color：red; text-decoration：none; }
< / style>
< / head>
< body>
< p>这是< a href =1>测试< / a>< / p>
< div class =myclass>
< p>这是< a href =2>测试< / a>< / p>
< / div>
< / body>
结果：
- 在IE6中，
.myclass a规则仅适用于未访问的链接状态 - 在其他浏览器，
.myclass a规则适用于所有链接状态
IE6是错误的，并且 .myclass a 没有指定伪类，应该应用于所有链接状态。但是，我遇到了这个SO问题，其中表示 a 等效于 a：link 。这将匹配IE6中的行为。
更新：
如评论中所述，对上述问题的接受答案已更新。
其他浏览器是正确的; IE6是错误的。
选择器 a 应该匹配任何< a& code>元素，而 a：link 只匹配< a> 超链接（HTML 4文档类型将超链接定义为< a> 具有 href 属性的元素） 。在任何规定中， a 应自动转换为 a：link ，反之亦然。
由于没有这样的翻译，你的两个CSS规则有同样具体的选择器（你的类选择器具有相等的特异性，每个你的伪类）。因此，您的第二条规则应该覆盖 div.myclass 中的任何< a>
顺便说一句，IE7也无法应用 font-当你在这不是一个链接，即使它应该是因为在你的第二条规则中没有重写的中使用风格div.myclass < a> 元素测试时，会使用粗体 font-weight 风格：
< div class =myclass>
< p>这是< a href =2>测试< / a>< / p>
< p>这是< a>测试< / a>< / p> <！ - 不是粗体悬停在IE7！ - >
< / div>
I came across this issue when testing a stylesheet across different browsers, including IE6 (yes, I know..)
<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>
Results:
- In IE6, the
.myclass arule only applies to the unvisited link state - In other browsers (FF, Chrome), the
.myclass arule applies to all link states
I believe that IE6 is wrong and that .myclass a, with no pseudo-classes specified, should apply to all link states. However I came across this SO question where it says that a is equivalent to a:link. This would match the behaviour in IE6. However I cannot find any official reference confirming this.
Which one is right?
Update:
As noted in the comments, the accepted answer to the question referenced above has since been updated.
The other browsers are right; IE6 is wrong.
The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.
Since there's no such translation going on, your two CSS rules have equally specific selectors (your class selector shares equal specificity with each of your pseudo-classes). So, your second rule is supposed to override the first rule for any <a> elements within div.myclass, regardless of their link state, thereby making it always red and with no text decoration.
By the way, IE7 also fails to apply the font-weight: bold style when you test with an <a> element in div.myclass that isn't a link, even though it's supposed to as there is no overriding font-weight style in your second rule:
<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>
这篇关于在IE6中链接样式行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
