为什么不使用 :visited 而不是 a:visited 获取链接？

Question

我看过的每个示例和样式表都使用a:visited 来设置链接样式。除了a:visited具有更高的特异性之外，:visited不应该是等价的和更简单的吗？

Answer 1

TL;DR：在撰写本文时，您是完全正确的； a:visited 和 :visited 之间没有区别。但是，使用 a:visited 是确保代码面向未来的最佳做法。

TL;DR 编辑：截至 2016 年 8 月，CSS4 工作草案允许其他标签使用 :visited。现在a:visited 和:visited 之间存在功能差异！当心。

对于当今的 Web 开发语言，特别是 HTML5 和 CSS3，您是对的：在功能上a:visited 和 :visited 之间没有区别。现在，请谨慎对待：Web 标准、元素和用户界面协议在不断发展，这意味着将来可能会引入与 :visited 兼容的新标签。

:visited 在 CSS 中引入时，W3C CSS1 spec 表示：

在 CSS1 中，锚伪类对 'a' 以外的元素没有影响。因此，可以从选择器中省略元素类型： a:link { color: red } == :link { color: red }

但是，在CSS2 spec 中，:visited 伪类的行为不仅限于a 标签：

文档语言决定了哪些元素是超链接源锚。例如，在 HTML4 中，链接伪类适用于具有“href”属性的a 元素。

这意味着由文档语言和浏览器决定哪些元素与:visited 兼容。虽然当前的行业标准规定，对于 HTML，只有具有 href 属性的 a 元素符合条件，但这很可能会在以后发生变化。

编辑，2016 年 8 月：看起来 CSS4 Working Draft 证实了我的怀疑；在新规范中，:visited 可用于其他“类链接”元素，即<area> 和<link>。规范说：

:any-link 伪类表示充当超链接源锚的元素。例如，在 [HTML5] 中，任何具有 href 属性的 <a>、<area> 或 <link> 元素都是超链接。

所以<a>、<area> 和<link> 都被视为超链接，并且规范说:visited 适用于所有超链接。因此，从 CSS4 开始，您最好将 a 包含在 a:visited 中。

Answer 2

根据Selectors Level 4:visited适用于任何超链接，在HTML中是<a>、<area>和<link>元素，当它们具有href属性时。

对link 元素的快速测试表明，Firefox 至少部分遵守了这一点：

在 FF 中尝试http://jsfiddle.net/rfdzpjLo/4/ 或见下文

link:before { content:attr(href); }
link { display:block; }
:visited { color: red; }
:link { color:green; }

<link href="http://stackoverflow.com/questions/27263128/why-not-visited-instead-of-avisited-for-links" />
<link href="example.net/lsjhuehbsi00ejjdus" />

Answer 3

是的，但如果引入了可能带有:visited 样式的新标签，它将不再兼容。

我能找到的最接近的证明：

http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes

文档语言决定了哪些元素是超链接源锚。例如，在 HTML4 中，链接伪类适用于具有“href”属性的 A 元素。因此，以下两个 CSS 2.1 声明具有相似的效果：

a:link { color: red }
:link  { color: red }

Answer 4

由于已经提到的原因，理论上它是相同的。在纸面上，a:visited 与 :visited 明确表示该样式仅适用于锚点，并且可能更快：将其视为浏览器需要在一方面遍历所有 a 标签，并检查如果 :visited 适用，则对 DOM 中的所有标签执行相同操作。

恕我直言，更重要的原因是与标签、伪选择器、类和标识符相关的样式不一定以一致且可预测的顺序从浏览器应用到下一个浏览器。

假设，例如，这个访问过的链接：

<a id="foo" class="bar" href="...">visited link</a>

然后考虑以下 CSS：

#foo {
  color: red;
}

.bar {
  color: green;
}

:visited {
  color: purple
}

曾经有一段时间，链接会根据浏览器显示为红色、绿色或紫色。 （也许情况仍然如此；我还没有测试过。）因为，有些人会认为 #foo 比 .bar 更重要（这是一个 ID 与一个类），并且对于类似的情况，这两者都比 :visited 更重要原因。有些人会将#foo、.bar 和:visited 视为具有相同重要性，作为标签本身的属性。有些人可能将#foo 和.bar 视为平等，但比:visited 更重要，因为后者只是一个伪类。以此类推。

现在，考虑一下这个 CSS，这是您今天在样式表中可能会遇到的那种东西：

a.bar {
  color: green;
}

:visited {
  color: purple
}

即使假设标签、ID、类和伪类都被同等对待，我们仍然有一个潜在的问题，即a.bar 也可以被某些浏览器认为比普通的:visited 更具体。

Ergo，你最终需要在声明中指定 a:visited 以确保所有浏览器中的行为都是一致的——而且可能还有一些坏苹果会让你想写 a:visited, a.bar:visited只是为了确定。

一旦你遇到了几次问题，习惯的力量就会发挥作用，你最终总是会写a:hover或a:visited。

Answer 5

:visited 是一个伪类选择器，仅用于当该浏览器过去访问过该锚链接的 href 属性时匹配的锚链接元素。它旨在为用户提供有用的反馈，因此他们可以区分他们访问过的链接和没有访问过的链接。

REFERENCE

伪类的语法如下

selector:pseudo-class {
    property:value;
}

所以你必须在使用伪类时使用选择器，因为它只支持链接，在这种情况下，选择器将是a。