0

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

4

5 回答 5

5

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

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

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

于 2012-09-14T20:14:16.070 回答
2

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

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

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

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

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

于 2012-09-14T20:18:36.420 回答
1

使用:link选择器选择链接

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

http://jsfiddle.net/9r4L9/

于 2012-09-14T20:14:38.590 回答
0

使用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;
}

现在，该样式仅适用于具有 class 的元素foo。

于 2012-09-14T20:14:37.347 回答
0

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

<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;
}
于 2012-09-14T20:14:57.020 回答