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

Question

谁能告诉我在样式表中是否有a {}代替（或相邻）使用的理由a:link, a:visited {}？我在浏览器，网站等上测试此结果的结果不一致，所以我从来没有得出满意的答案。我也无法在Google上找到答案。

当然，这是假设 永远没有 理由使用<a>没有href值的标签。也许这是一个错误的假设。

编辑

我知道这些选择器的 作用
。我正在寻找为什么要使用a而不是a:link或的原因a:visited，因为它a始终具有href属性。但是正如克里斯·布莱克（Chris
Blake）和瑞安·普（Ryan P）在回答中说的那样，也有<a name="top">和javascript用法，两者都不需要href属性。

Answer 1

当然，这是假设 永远没有 理由使用<a>没有href值的标签。也许这是一个错误的假设。

好吧，实际上…并非每个<a>元素都需要具有href属性。确实，在HTML5中仍然
不需要href为每个都指定<a>。克里斯·布雷克（ChrisBlake）和瑞安·普（RyanP）讨论了命名锚点的概念，我将补充一点，尽管HTML5以来的name属性<a>已过时，但命名锚点仍然很盛行，并且将继续存在，仅仅是继承和传统而已。

就是说， 今后 ，建议作者使用id属性而不是命名锚来指定文档锚片段。

同样，<a>缺少href属性但具有onclickJavaScript
属性的元素也一团糟。即使你坚持使用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：

/* All unvisited links should be red */
a:link {
    color: red;
}

/* All visited links should be slightly darker */
a:visited {
    color: maroon;
}

/* But no matter what, header links must be white at all times! */
body > header > a {
    color: white;
}

这并不符合预期，因为a:link和a:visited比更为具体body > header > a，因此标头链接实际上 绝不 会是白色的：

/* 1 pseudo-class, 1 type  -> specificity = (0, 1, 1) */
a:link, a:visited

/* 3 types                 -> specificity = (0, 0, 3) */
body > header > a

现在，大多数CSS编码人员想到的第一件事就是投入使用!important，完全放弃了特异性：

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

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

好吧，如果您对使用感到不舒服!important，则可以使用a[href]，如上所述。

/* 1 attribute, 3 types    -> specificity = (0, 1, 3) */
body > header > a[href] {
    color: white;
}

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

/* 1 pseudo-class, 3 types -> specificity = (0, 1, 3) */
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, footer a:visited。我可以轻松地选择它，footer a[href]因为它也可以正常工作，但是我个人更喜欢同时指定这两个伪类，因为它更直观，即使它会使选择器更长一些。

1 特殊性和重复的选择器构成了一个巨大的问题，实际上，工作组提出了下一个规范中的:any- link伪类提案，以消除必须依赖hrefHTML中的属性的问题，但这将等待很 长一段 时间才能看到曙光（谁知道那时会叫什么）：

/* 1 pseudo-class, 3 types -> specificity = (0, 1, 3) */
body > header > a:any-link {
    color: white;
}