Question

我在跨不同浏览器测试样式表时遇到过这个问题，包括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 a规则仅适用于未访问的链接状态
在其他浏览器（FF，Chrome）中，.myclass a规则适用于所有链接状态

我认为IE6是错误的，没有指定伪类的.myclass a应该适用于所有链接状态。但是我遇到了this SO question，其中a相当于a:link。这将符合IE6中的行为。但是我找不到任何证实这一点的官方参考资料。

哪一个是对的？

更新

如评论中所述，上述问题的已接受答案已经更新。

Answer 1

其他浏览器是对的; IE6错了。

选择器a应匹配任何<a>元素，而a:link仅匹配未访问的超链接的<a>元素（HTML 4文档） type将超链接定义为具有<a>属性的href元素。它在任何一个规范中都没有说明a应该自动转换为a:link，反之亦然。

由于没有这样的翻译，你的两个CSS规则具有同样特定的选择器（你的类选择器与你的伪类的每个具有相同的特异性）。因此，您的第二条规则应该覆盖<a>内任何div.myclass元素的第一条规则，无论其链接状态如何，从而使其始终为红色且没有文字修饰。

顺便说一下，当您使用font-weight: bold中的<a>元素进行测试时，IE7也无法应用div.myclass样式，这个元素不是链接，即使它应该在那里在你的第二条规则中没有重写font-weight样式：

<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>

Answer 2

IE6是对的。不在a上指定伪类与:link相同。因此，如果您需要特定内容，则必须指定:link和:visited的样式 - :hover和:active是可选的。

链接IE6中的样式行为

2 个答案: