24

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

/* 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吗？为什么或者为什么不？

我不在乎链接是否被访问。两者都收到相同的样式。我只关心悬停或不悬停。这个问题与变体的作用无关——它们都做同样的事情。这是关于最好的变体是什么。变体之一有问题吗？哪一个是最佳实践？

4

5 回答 5

68

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

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

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

a会匹配它，a:link不会。

于 2013-08-24T17:51:32.230 回答
21

它用于区分简单锚点和具有 href 属性的锚点。在此处查看演示 jsfiddle。

<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 是安全的。

于 2013-08-24T17:49:51.400 回答
2

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

我不在乎链接是否被访问

那么你可以避免使用a:link...use of onlya...a:hover...a:active会满足你的需要

如果你的锚a:link中没有，也不会工作，但会做hrefa

于 2013-08-24T17:55:02.467 回答
1

我想你可以使用

<a>

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

于 2013-08-24T17:44:10.840 回答
1

这完全取决于您的意图，因此对于您的示例，我将简单地将所有锚元素设置为一种颜色，并且仅在元素悬停时更改样式。

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

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

如果您要在这种情况下使用所有伪元素，并且您希望唯一的区别是悬停它看起来像这样：

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

伪类名称是不言自明的：

  • :link - 任何未访问的链接
  • :visited - 任何访问过的链接
  • :active - 当链接处于活动状态时，例如当它被点击或被键盘事件激活时
  • :focus - 当链接获得焦点时，例如当用户在元素之间切换并且它是选定元素时
  • :hover - 当它悬停或鼠标悬停时

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

于 2013-08-24T18:21:48.793 回答