为什么我们需要"a:link"？为什么不只是"一个"？

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属性的简单锚点和锚点.在这里查看demo 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是安全的.