0

我有一个通用的 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; }
4

2 回答 2

3

看起来好像有一条您可能没有意识到正在生效的规则。

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

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

我创建了一个JSFiddleul ,它显示了您可能访问过的 URL之外的链接,它应该显示为红色。解决方法是使选择器不那么通用。例如:

.menu a:link, .menu a:visited { color: red; }
于 2013-04-26T14:23:23.733 回答
2

请注意,您没有在a:visited选择器前面加上.menu.

我猜想特定的行应该是这样的:

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

它在 safari 中只有红色的原因是因为它是唯一访问过的浏览器aligues.html

于 2013-04-26T14:22:47.177 回答