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

Question

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

a { ... }

vs

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

Answer 1

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

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

Answer 2

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

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

a:link {
    color: #00F;
}

a:hover {
    color: #F00;
}

a:visited {
    color: #888;
}

a:active {
    color: #0F0;
}

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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