将光标移到书签上时，如何防止书签改变样式？答案

【问题标题】：How can I prevent a bookmark from changing style when moving the cursor over it?将光标移到书签上时，如何防止书签改变样式？
【发布时间】：2012-09-14 20:10:30
【问题描述】：

我对 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 上区分两者。我知道我可以为链接使用一个类，但我想知道是否有更好的方法。

【问题讨论】：

标签： html css hyperlink stylesheet

【解决方案1】：

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

相反，您应该在任何元素上添加一个id="..."。

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

【讨论】：

【解决方案2】：

虽然:link 选择器似乎有效，但根据 W3Schools 的说法，它仅适用于未访问的链接。

(编辑： 看来 W3Schools 在这方面存在误导。至少在某些浏览器中，:link 选择器将选择链接到某物的<a> 标签，无论是否访问过，但color 属性将被浏览器默认访问链接覆盖。显然属性选择器，如下所述，比默认浏览器设置具有更高的特异性，所以如果你想强制你的链接是你设置的颜色，不管用户之前是否点击过该链接，则应使用属性选择器。）

如果您不太关心 IE6，并且为 IE 7 和 8 指定了文档类型，那么一种方法是使用属性选择器：

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

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

【讨论】：

“为了仅设置未访问链接的样式，您需要将 :link 规则放在其他链接之前” – MDN page。您使用 unreliable source 提供的信息不准确。我必须对你投反对票。
嗯，我原以为大多数 w3fools 的东西在最坏的情况下都是挑剔的，但这个确实不准确。感谢您的澄清。
也许更新你的答案呢？对 cmets 进行投票也很有效。 :)
我刚刚做了一个 JSFiddle 来测试，jsfiddle.net/G2tYc 看起来 W3Schools 实际上可能是准确的（至少在我的 Chrome 版本中）。我怀疑它不起作用的原因与默认样式有关？
有趣。似乎 :link 在 CSS 中的优先级低于 Chrome 中的默认样式，Chrome 可能有文本颜色的规范，但没有背景。无论如何，我很确定:link 是解决此问题的不可靠方法，而属性选择器（可能带有一些 javascript 后备代码来为 IE 添加类）是更好的解决方案。

【解决方案3】：

使用:link选择器选择链接

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

http://jsfiddle.net/9r4L9/

【讨论】：

【解决方案4】：

使用class：

在 HTML 中，使用 class 属性。

<a href="#user-interface" class="foo">User interface</a>
<a name="user-interface">User Interface</a>

在css中：

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

现在，样式只适用于类foo的元素。

【讨论】：

【解决方案5】：

向书签添加一个类，然后在悬停声明之后在其上添加一些样式：

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

和css：

a:hover
{
    color:#D090D0;
    background:#803080;
    text-decoration:none;
}
a.bookmark {
    color: black;
    background: white;
    text-decoration:none;
}

【讨论】：