如何防止在将光标移动到书签上时更改样式？

Question

我几乎没有使用CSS的经验，所以这可能是一个非常简单的问题。

我在我的网页上有一个目录，链接如下：

<a href="#user-interface">User interface</a>

在其他地方，我有一个类似这样的书签：

<a name="user-interface">User Interface</a>

除此之外，我还有一个CSS文件，样式如下：

a:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

目标是当我将光标移动到链接上时，更改链接的颜色和背景颜色，这是完美的工作。但问题是，当我将鼠标指针移到书签上时，书签的样式也会发生变化。这对我来说是有意义的，因为链接和书签都使用了<a>标签，但我不知道如何在CSS上区分两者。我知道我可以使用一个类来链接，但我想知道是否有更好的方法。

Answer 1

<a name="...">已弃用。

相反，您应该将id="..."放在任何元素上。

要回答这个问题，请添加:link。

Answer 2

根据W3Schools的说法，虽然:link选择器似乎可以工作，但它只适用于未访问的链接。

(编辑：这似乎是W3Schools在这一点上的误导。至少在某些浏览器中，:link选择器将选择链接到某个内容的<a>标记，无论是否访问过，但是color属性将被访问过的链接的浏览器默认设置覆盖。显然，属性选择器具有比默认浏览器设置更高的特异性，因此，如果您希望强制链接为您设置的颜色，而不管用户以前是否单击过该链接，则应使用属性选择器。)

如果你不太关心IE6，并且有一个为IE7和8指定的文档类型，一种方法是使用属性选择器：

a[href]:hover {
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

除此之外，我认为您最好添加一个类。

Answer 3

使用:link选择器选择链接

a:link:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}

http://jsfiddle.net/9r4L9/