CSS样式链接:为什么a:链接,a:访问vs只是一个

时间:2010-07-16 11:27:12

标签: css

我想知道为什么我不能使用,或者不应该使用

a { ... }

vs

a:link, a:visited { ... }

7 个答案:

答案 0 :(得分:10)

如果您只设置a {...}样式,则样式将应用于所有锚元素,包括<a name="..."></a>元素,这些元素在页面中定义锚点,但不引用超链接。

a:link {...}具体涉及超链接。 :visited:hover:active是这些链接的不同状态。请注意,:hover:active也可以应用于其他元素。

答案 1 :(得分:3)

您可以仅为a提供链接的常规样式。可以将更具体的样式应用于伪类。例如:

a {
    text-decoration: none;
    font-weight: bold;
}

a:link {
    color: #00F;
}

a:hover {
    color: #F00;
}

a:visited {
    color: #888;
}

a:active {
    color: #0F0;
}

在此示例中,所有链接都采用粗体样式,并且没有下划线。但是每种类型链接的颜色都会发生变化......

答案 2 :(得分:2)

这只是一个问题,你想要一个访问链接与普通链接的不同的样式(例如调暗链接,我已经在那里)。

只有 a有效,但您是否希望为:visited:hover链接提供特殊样式?

答案 3 :(得分:0)

:visited表示您尝试为链接指定用户之前访问过的样式,并且:hover表示您尝试在用户鼠标悬停该链接时为链接指定样式。您可能会也可能不会使用它。这是你的选择。

答案 4 :(得分:0)

a:link如果是未访问的链接,a:visited是用户访问过的链接。通常,用户需要某种方式来区分两者,在这种情况下,您将单独设置它们的样式。如果您不想要任何差异(例如菜单),那么只需a即可。

答案 5 :(得分:0)

虽然第一个a引用了所有链接,但:link:visited指的是这些链接的特定状态。

第一个引用非访问链接,后者访问一个。有关更多信息,请参阅http://www.w3.org/TR/CSS2/selector.html#link-pseudo-classes

答案 6 :(得分:0)

如果您设置{...}的样式,则其工作方式类似于a:link,a:visited {...}。同样,a:link不能覆盖{...}样式,但是a:visited可以。如果要添加样式的所有状态,最好使用{...}。另外,a:link仅应用具有href属性的元素。