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

使用:link选择器选择链接

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

http://jsfiddle.net/9r4L9/

Answer 3

使用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的元素。

Answer 4

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

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

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

4 个答案: