Question

我有一个通用的CSS规则，链接可以正常工作，直到我发出异常。在简化的这种特定情况下，一般链接应为黑色，异常应为红色。但是当我添加“.menu a：link”时，一切都变红了。

问题仅出在Safari中，而不是其他浏览器。在像FsFiddle或JsBin这样的地方，一切都还可以。

我做错了吗？

HTML：

<ul class="menu">
    <li><a href="#">should be red</a></li>
    <li><a href="#">should be red</a></li>
    <li><a href="#">should be red</a></li>
</ul>

<a href="aligues.html"> should be black </a> <br>

CSS：

a { outline:0; text-decoration: none ; }
a:link, a:visited { color: black; }
a:hover { color: black;text-decoration: none; }  

.menu a:link, a:visited { color: red; }
.menu a:hover { color: red;text-decoration: none; }

Answer 1

看起来你可能没有意识到有一条规则正在起作用。

.menu a:link, a:visited { color: red; }

此规则实际上指定菜单中的所有链接都是红色以及已访问的所有链接。所以看起来你可能已经访问了页面周围的其他链接，safari只是将它们标记为已读？

我创建了一个JSFiddle，其中显示了ul之外的链接，其中包含您可能访问过的网址，它应显示为红色。修复方法是使选择器不那么通用。例如：

.menu a:link, .menu a:visited { color: red; }

Answer 2

请注意，您的a:visited选择器前面没有.menu。

我猜这个特定的行应该是这样的：

.menu a:link, 
.menu a:visited { color: red; }

在Safari中只有红色的原因是因为这是访问aligues.html的唯一浏览器。

Safari和ul中的链接

2 个答案: