Question

以下变体似乎产生相同的结果：

/* 1 */
a, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 2 */
a, a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

/* 3 */
a:link, a:visited, a:active { color: black; }
a:hover { color: red; }

网络上的大多数指南使用2或3.为什么不选择最简单的1？如果您只需要一种普通链接样式和一种悬停样式，我就找不到适用:link的理由。

不使用:link是最佳做法吗？为什么或为什么不呢？

我不关心链接是否被访问过。两者都收到相同的样式。我只关心悬停或不悬停。这个问题不是关于变体的作用 - 都做同样的事情。它是关于最佳变体的内容。其中一个变种有缺陷吗？哪一个是最佳实践？

Answer 1

因为不是每个a都是链接。

<a name="table_of_contents">Table of Contents</a>

不是链接，它是可以与<a href="#table_of_contents">链接的锚点。

a会与之匹配，a:link则不会。

Answer 2

它用于区分具有href属性的简单锚点和锚点。 See demo jsfiddle here

<style>
a { color: red; }
a:link { color: blue; }
</style>
<a name="anchor">No href</a><br />
<a href="http://stackoverflow.com/">With href</a>

编辑：因此，重要的是涵盖CSS中的所有情况。选项2是完全涵盖所有案例的唯一选择。如果您没有没有href属性的锚元素，那么使用选项1是安全的。

Answer 3

a:link专门针对尚未访问过的链接。 a适用于所有<a>元素。如您所说

我不关心链接是否被访问

然后您可以避免使用a:link ...仅使用a...a:hover...a:active将满足您的需求

如果您的锚中没有a:link但href会做

，那么

并且a也无法正常工作

Answer 4

我想你可以使用

<a>

创建一个按钮，以便产生替代结果...... 我总是使用a:link

Answer 5

这完全取决于你的意图，所以对于你的例子，我只是将所有锚元素设置为一种颜色，并且只在元素悬停时改变样式。

a {color: #000;}
a:hover {color: #f00;}

在您的情况下，您只是在链接悬停时更改链接的颜色。您需要在基本规则之后添加hover伪元素，否则由于样式表的级联而会覆盖它。

如果您在这种情况下使用了所有的伪元素，并且您希望唯一的区别是悬停，它将如下所示：

a:link, a:visited, a:focus, a:active {color: #000;}
a:hover {color: #f00;}

伪类名称是不言自明的：

：link - 任何未访问的链接
：访问过 - 任何访问过的链接
：有效 - 当链接处于活动状态时，例如用键盘事件点击或激活时
：焦点 - 当链接获得焦点时，例如当用户选中元素并且它是所选元素时
：悬停 - 当它悬停或被鼠标悬停时

使用伪类的好处是它具有比仅仅定位锚元素更高的特异性。但是，在您的情况下，可能不需要它。

为什么我们需要“a：link”？为什么不只是“一个”？

5 个答案: