html - 是否有理由使用 a 而不是 :link or a:visited in my stylesheet?

Question

谁能告诉我是否有任何理由使用 a {}而不是(或邻近)a:link, a:visited {}在我的样式表中？我在跨浏览器、网站等方面的测试结果不一致，所以我从来没有想出令人满意的答案。我也无法在 Google 上找到答案。

这当然是假设会有 从不 成为使用 <a> 的理由没有 href 的标签值(value)。也许这是一个错误的假设。

** 编辑 **

我知道这些选择器的作用。我正在寻找使用 a 的原因而不是 a:link或 a:visited , 自 a总是有一个 href属性。但正如 Chris Blake 和 Ryan P 在回答中所说，还有 <a name="top">和 javascript 用法，两者都不需要 href属性。

Answer 1

This is of course assuming there would never be a reason to use an <a> tag without an href value. Maybe that's a mistaken assumption.

这取决于您的元素。严格来说，这是一个错误的假设，因为并非每个 <a> 元素都需要具有 href 属性。实际上，HTML5 中仍然不需要 来为每个 href 指定 <a> 。 Chris Blake 和 Ryan P 提到了命名 anchor ，我要补充一点，虽然 name 的 <a> 属性一直是 made obsolete as of HTML5 ，但命名 anchor 仍然很普遍，而且将继续存在，只是由于传统和传统。
也就是说，从 到 ，建议作者使用 id 属性而不是命名 anchor 来指定文档 anchor 片段。
此外，缺少 <a> 属性但具有 JavaScript 的 href 属性的 onclick 元素是一团糟。即使您坚持使用 onclick 绑定(bind)事件，为了优雅降级，您至少应该使用 href 将其指向某个地方。
但为了简单起见，我们假设您不会编写没有 <a> 属性的 href 元素。
考虑到这一点，回到 CSS 选择器，有两个要点需要考虑:
他们是一样的吗？
不，选择器 a 和 a:link, a:visited 不是严格等效的。关于这个话题，我将引用我的一个 previous answer :

The selector a should match any <a> elements, while a:link only matches <a> elements that are unvisited hyperlinks (the HTML 4 document type defines hyperlinks as <a> elements with a href attribute). Nowhere does it state in either specification that a should automatically translate to a:link or vice versa.

换句话说，在 HTML 中， a:link, a:visited (在 CSS1 中)严格等同于 a[href] (在具有属性选择器的 CSS2 中)或 a:any-link (在 Selectors level 4 中新增)，而不是 a 。请注意，属性是否具有值并不重要，只要它存在，伪类就会匹配，因此 [href] 。还要注意，这适用于所有当前的 HTML 标准，我相信这包括 HTML5，因为如上所述 href 在任何现有规范中都不是必需的属性。
请记住，其他语言可能为 :link 和 :visited 定义了完全不同的语义——碰巧它们与 HTML 中同样特定的选择器重合，接下来将介绍...
特异性
这是一个巨大的问题: a 不如 a:link 或 a:visited 特定，这是一个非常常见的特异性问题来源，当分别将样式应用于 a 、 a:link 和 a:visited 时，这一点尤为明显。这会导致各种 !important hacks 来解决缺乏对特异性的理解。
例如，考虑这个 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;
}

但这会让你得到各种糟糕的代表，对吧？所以我们不要那样做。
选择器级别 4 为您提供的不是一个，而是两个解决此特殊性问题的解决方案。这些新的解决方案在 Internet Explorer 和 Microsoft Edge Legacy(UWP/EdgeHTML/非 Chromium 版本)中不受支持，但幸运的是，还有第三种解决方案适用于 Internet Explorer 7 及更高版本，即 a[href] ，我上面提到的属性选择器。
1. :any-link 伪类 :any-link 背后有一些历史，你可以在我对 this question 的回答中阅读，但实际上， :any-link 是 :link, :visited 的统称。它的主要目的是消除选择器重复，因此实际上有 :is(:link, :visited) 形式的等效项。
您可以在专用规则中使用 a:any-link 来匹配通用 a:link 和 a:visited 规则的特殊性，从而允许它覆盖它们:

a:link {
    color: red;
}

a:visited {
    color: maroon;
}

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

2. :where() 伪类 :where() 背后也有一些历史，但本质上它与 :is() 类似，不同之处在于它将其参数的特异性归零。请参阅我对 this question 的回答以获取有关其工作原理的深入指南。
您可以将 :link 和 :visited 伪类包装在 :where() 中以删除它们的伪类特异性，从而允许它们被专用规则覆盖:

/* 1 type                  -> specificity = (0,0,1) */
a:where(:link) {
    color: red;
}

/* 1 type                  -> specificity = (0,0,1) */
a:where(:visited) {
    color: maroon;
}

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

3. a[href](适用于旧浏览器)
幸运的是，如果您需要支持旧浏览器，属性选择器与伪类一样具体。这意味着您可以使用 a[href] 来表示 a:link 和/或 a:visited 两者之一，并且不会遇到特异性问题，因为它们同样具体!

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

那么使用哪个选择器？
这仍然是非常主观的，但我遵循这些个人经验法则:

适用于不依赖于链接状态的 a 样式(即，只要它是链接就可以)。

适用于 a:link 和 a:visited 样式，其中链接是否被访问很重要。

考虑到上面提到的特殊性问题，a 和 a:link/a:visited 规则之间不要混合任何声明。如果我需要将相同的属性应用于某处的两个状态，但我已经在单独的 a:link 和 a:visited 规则中拥有它，我将使用上述 3 个选项之一来避免特异性问题。

例如，以下是我在网站发布之前在“即将推出”页面中使用的链接样式:

a {
    text-decoration: none;
    transition: text-shadow 0.15s 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;
}

a:focus {
    outline: thin dotted;
}

/* ... */

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 。这是出于遗留原因(正如您将在下面看到的，我最初是在 2012 年发布的!)，但当然它可以缩短为 footer a:any-link 。然而，特异性匹配原则同样适用。
希望我的建议可以帮助您处理链接样式的困惑。