logo标签列表

CSS样式链接：为什么要使用a:link, a:visited而不是只用a？

css
6
我不知道为什么我不能使用，或者不应该使用。
a { ... }

vs 

a:link, a:visited { ... }
7个回答
11

如果你只对a { ... }进行样式设置，那么这个样式将会应用到所有锚点元素，包括在页面内定义锚点而不指向超链接的<a name="..."></a>元素。

a:link {...} 专门用于设置超链接的样式。 :visited、:hover和:active是这些链接的不同状态。请注意，:hover和:active也可以应用于其他元素。

3
记住，<a … 不是指 ›链接‹ 而是指 ›锚点‹。a:link 只适用于带有 href 属性的锚点元素。 - knittl
4
您可以仅使用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

这只是一个问题，你是否想要为访问的链接和普通链接设置不同的样式（例如将链接变暗，以表示你已经点击过该链接）。

只有 a 是有效的，但是你是否想为:visited或:hover链接设置特殊样式呢？

我在思考是否可以这样做：a { 这将作为默认值。将覆盖 :visited, :hover, :active } a:hover, a:active { 与 hover 等交互相关的样式 }。这样我就不需要写那么多代码了，a{} 与 a:link, a:visited{}。 - Jiew Meng
0

:visited 表示你想要为用户之前访问过的链接设置样式，而:hover 表示你想要在用户将鼠标悬停在链接上时给它设置样式。你可以选择使用或者不使用它，这取决于你。

0

a:link 用于未访问的链接，而a:visited 用于用户已经访问过的链接。通常用户希望以某种方式区分两者，因此您需要单独为它们设置样式。如果您不想有任何差异（例如菜单），那么只需使用a即可。

0
0
如果您为 {...} 样式设置样式，则它可以像 a:link、a:visited {...} 一样工作。同时，a:link 无法覆盖 {...} 样式，但 a:visited 可以。如果您想要增加所有 a 元素的样式，最好使用 a {...}。另外，a:link 只会应用于具有 href 属性的元素中。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接