是否有理由在样式表中使用a而不是a：link或a：visit？

是否有理由在样式表中使用a而不是a：link或a：visit？

当然，这是假设 永远没有 理由使用

<a>

没有

href

值的标签。也许这是一个错误的假设。

好吧，实际上…并非每个

<a>

元素都需要具有

href

属性。确实，在HTML5中仍然
不需要

href

为每个都指定

<a>

。克里斯·布雷克（ChrisBlake）和瑞安·普（RyanP）讨论了命名锚点的概念，我将补充一点，尽管HTML5以来的

name

属性

<a>

已过时，但命名锚点仍然很盛行，并且将继续存在，仅仅是继承和传统而已。

就是说， 今后 ，建议作者使用

id

属性而不是命名锚来指定文档锚片段。

同样，

<a>

缺少

href

属性但具有

onclick

Javascript
属性的元素也一团糟。即使你坚持使用

onclick

绑定事件，优雅降级的缘故，你至少应该点它 的地方 使用

href

。

但是为了简单起见，让我们假设您不会编写

<a>

没有

href

属性的元素。

考虑到这一点，回到CSS选择器，有两点需要考虑：

他们是一样的吗？

不，选择器

a

和

a:link,a:visited

不是严格等效的。

选择器

a

应匹配任何

<a>

元素，而

a:link

仅匹配 未访问的超链接的

<a>

元素（HTML
4文档类型将超链接定义为具有属性的元素）。它在任何规范中均未注明应自动转换为标准，反之亦然。 __

<a>``href``a``a:link

换句话说，在HTML中，

a:link,a:visited

（在CSS1中）严格等于

a[href]

（在具有属性选择器的CSS2中），而不是

a

。请注意，只要存在，属性是否有值都没有关系

[href]

。还请注意，这对于所有当前的HTML标准都是如此，并且我认为其中包括HTML5，因为如上所述，

href

在任何现有规范中都不是必需的属性。

请记住，其他语言可能会为

:link

和定义完全不同的语义

:visited

-碰巧它们与HTML中一个同样特定的选择器重合，这将在接下来的内容中进行介绍…

特异性

这是一个巨大的疑难杂症：

a

小于特定比任一

a:link

或

a:visited

，这是施加样式时是特别明显的特异性问题很常见的源

a

，

a:link

和

a:visited

分别。然后，这导致各种

!important

骇客绕开对特异性的了解。1个

幸运的是，属性选择器与伪类一样具体。这意味着您可以

a[href]

同时使用“

a:link

和/或

a:visited

”和“ 或”
来表示，而不会遇到特异性问题，因为它们同样具有特异性！

例如，考虑以下CSS：

a:link {    color: red;}a:visited {    color: maroon;}body > header > a {    color: white;}

这并不符合预期，因为

a:link

和

a:visited

比更为具体

body > header > a

，因此标头链接实际上 绝不 会是白色的：

a:link, a:visitedbody > header > a

现在，大多数CSS编码人员想到的第一件事就是投入使用

!important

，完全放弃了特异性：

body > header > a {    color: white !important;}

但这会让您遇到各种各样的不良代表，对吗？

好吧，如果您对使用感到不舒服

!important

，则可以使用

a[href]

，如上所述。

body > header > a[href] {    color: white;}

或这样做，这会带来冗长的问题，但对较旧的浏览器更友好，并且更加直观：

body > header > a:link, body > header > a:visited {    color: white;}

那么要使用哪个选择器呢？

最后，这仍然是所有主观的疯狂，但是我遵循以下个人经验法则：

• 适用于 不依赖于链接状态的

  a

  样式（即，只要它是链接即可）。 __

• 适用于

  a:link

  和

  a:visited

  样式， 无论 是否访问链接都很重要。

• 考虑到上面提到的特异性问题，不要混用之间的任何声明 都

  a

  和

  a:link

  /

  a:visited

  规则。如果我需要将相同的属性适用于这两个州的某个地方，但我已经拥有它的独立

  a:link

  和

  a:visited

  规则，写一个选择器，结合了伪类; 不要只是使用

  a

  ！

例如，以下是我在网站中使用的链接样式：

a {    text-decoration: none;    transition: text-shadow 0.1s linear;}a:link {    color: rgb(119, 255, 221);}a:visited {    color: rgb(68, 204, 170);}a:hover, a:active {    text-shadow: 0 0 0.5em currentColor;    outline: 0;}footer a:link, footer a:visited {    color: rgb(71, 173, 153);}

该

text-shadow

过渡所有定义的

a

元素，不管它们是否被访问或没有，因为过渡才会生效时，其中一个位于鼠标上并点击（对应于

a:hover,a:active

规则）。

现在，我想访问过的链接比未访问链接略暗的阴影，所以我把颜色分开

a:link

和

a:visited

规则。但是，由于某种原因，无论是否访问，我都希望页脚链接显示相同的颜色。

如果使用

footer a

，则会遇到上述特异性问题，因此我选择了

footer a:link, footera:visited

。我可以轻松地选择它，

footera[href]

因为它也可以正常工作，但是我个人更喜欢同时指定这两个伪类，因为它更直观，即使它会使选择器更长一些。

---

1 特殊性和重复的选择器构成了一个巨大的问题，实际上，工作组提出了下一个规范中的

:any-link

伪类提案，以消除必须依赖

href

HTML中的属性的问题，但这将等待很 长一段 时间才能看到曙光（谁知道那时会叫什么）：

body > header > a:any-link {    color: white;}