为什么不：访问而不是：访问链接？

Every example and stylesheet I've looked at uses a:visited to style links. Besides a:visited having higher specificity, shouldn't :visited be equivalent and simpler?

我看过的每个示例和样式表都使用了：访问样式链接。除了：访问具有更高的特异性，不应该：访问等同和更简单？

5 个解决方案

#1

TL;DR: At the time of writing, you are completely correct; there is no difference between a:visited and :visited. However, using a:visited is best practice for future-proofing your code.

TL; DR：在撰写本文时，您完全正确; a：visited和：visited之间没有区别。但是，使用a：visited是将来验证代码的最佳实践。

TL;DR EDIT: As of August 2016, the CSS4 Working Draft allows other tags to use :visited. There is now a functional difference between a:visited and :visited! Beware.

TL; DR EDIT：截至2016年8月，CSS4工作草案允许使用其他标签：已访问。现在有一个功能区别：访问和访问！谨防。

For web development languages today, specifically HTML5 and CSS3, you are right: there is functionally no difference between a:visited and :visited. Now, please take this with caution: web standards, elements, and user interface protocols are ever-evolving, meaning that in the future, it is possible that a new tag compatible with :visited may be introduced.

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

When :visited was introduced in CSS, the W3C CSS1 spec said:

当：在CSS中引入了访问时，W3C CSS1规范说：

In CSS1, anchor pseudo-classes have no effect on elements other than 'a'. Therefore, the element type can be omitted from the selector: a:link { color: red } == :link { color: red }

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

HOWEVER, in the CSS2 spec, the behavior of the :visited pseudo-class was not restricted to just a tags:

但是，在CSS2规范中，：visited伪类的行为并不仅限于标签：

The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to a elements with an "href" attribute.

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

This means that it is up to the document language and browser to determine which elements are compatible with :visited. While the current industry standard states that for HTML, only a elements with an href attribute qualify, this may well change later down the line.

这意味着由文档语言和浏览器决定哪些元素与以下内容兼容：已访问。虽然当前的行业标准规定，对于HTML，只有具有href属性的元素才有资格，这可能会在以后的行中发生变化。

EDIT, August 2016: Looks like the CSS4 Working Draft has confirmed my suspicion; in the new spec, :visited can be used for other "link-like" elements, namely <area> and <link>. The spec says:

编辑，2016年8月：看起来CSS4工作草案证实了我的怀疑;在新规范中，：visited可用于其他“类链接”元素，即和。规范说：

The :any-link pseudo-class represents an element that acts as the source anchor of a hyperlink. For example, in [HTML5], any <a>, <area>, or <link> elements with an href attribute are hyperlinks.

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

So <a>, <area>, and <link> are all treated as hyperlinks, and the spec says that :visited applies to all hyperlinks. So as of CSS4, you'll be better off including the a in a:visited.

所以，和都被视为超链接，规范说：visited适用于所有超链接。因此，从CSS4开始，你最好将a包含在：visit中。

#2

According to Selectors Level 4 :visited applies to any hyperlink, which in HTML is the <a>, <area> and <link> elements when they have an href attribute.

根据Selectors Level 4：visited适用于任何超链接，当它们具有href属性时，HTML中的，和元素。

A quick test for the link element shows that Firefox at least partially respects this:

对link元素的快速测试表明Firefox至少部分尊重这一点：

Try http://jsfiddle.net/rfdzpjLo/4/ in FF or see below

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

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

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

#3

Yes, but it won't be future compatible if a new tag is introduced that may be styled with :visited.

是的，但是如果引入了可以使用以下方式设置样式的新标签，则将来不会兼容：访问。

Closest proof I can find:

最接近的证据我可以找到：

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

The document language determines which elements are hyperlink source anchors. For example, in HTML4, the link pseudo-classes apply to A elements with an "href" attribute. Thus, the following two CSS 2.1 declarations have similar effect:

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

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

#4

In theory it's the same for reasons already mentioned. On paper, a:visited vs :visited makes it explicit that the style only applies to anchors, and may potentially be faster: think of it as the browser needing to iterate through all a tags in the one hand side, and checking if :visited applies, vs doing the same for all tags in the DOM.

理论上，由于已经提到的原因，它是相同的。在纸面上，a：visited vs：visited明确表示该样式仅适用于锚点，并且可能更快：将其视为浏览器需要迭代单手中的所有标记，并检查是否：已访问适用于对DOM中的所有标记执行相同操作。

Imho though, the more important reason is that styles related to a tag, a pseudo-selector, a class and an identifier aren't necessarily applied in a consistent and predictable order from a browser to the next.

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

Suppose, for instance, this visited link:

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

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

Then consider the following CSS:

然后考虑以下CSS：

#foo {
  color: red;
}

.bar {
  color: green;
}

:visited {
  color: purple
}

There used to be a time where the link would appear red, green or purple depending on the browser. (Perhaps it's still the case; I haven't tested.) Because, some would treat #foo as more important than .bar (it's an ID vs a class) and both of these as more important than :visited for similar reasons. Some would treat #foo, .bar and :visited as if they had the same importance, as a property of the tag itself. Some might have treated #foo and .bar as equals but more important than :visited on grounds the latter is a mere pseudo class. And so forth.

曾经有一段时间，链接会显示为红色，绿色或紫色，具体取决于浏览器。（也许情况仍然如此;我还没有测试过。）因为，有些人会认为#foo比.bar更重要（它是一个ID与一个类），而且这两个都比以下更重要：访问因为类似的原因。有些人会将＃foo，.bar和：visit视为具有相同的重要性，作为标签本身的属性。有些人可能已经将#foo和.bar视为平等，但更重要的是：访问理由后者仅仅是伪类。等等。

Now, consider this CSS, which is the kind of stuff you might encounter in a stylesheet today:

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

a.bar {
  color: green;
}

:visited {
  color: purple
}

Even assuming that tags, ID, classes and pseudo classes are all treated equal, we still have a potential problem, in that a.bar can also be considered more specific than plain :visited by some browsers.

即使假设标签，ID，类和伪类都被视为相同，我们仍然存在潜在的问题，因为a.bar也可以被认为比plain更具体：某些浏览器访问过。

Ergo, you end up needing to specify a:visited in the declaration to ensure the behavior is consistent in all browsers -- and chances are there are still a few bad apples around that'll make you want to write a:visited, a.bar:visited just to be sure.

因此，你最终需要在声明中指定一个：访问以确保所有浏览器中的行为都是一致的 - 并且可能还有一些不好的苹果，这会让你想写一个：visited，a。吧：拜访只是为了确定。

Once you've run into the problem a few times, force of habit kicks in and you'll end up always writing a:hover or a:visited.

一旦你遇到问题几次，习惯的力量就会开始，你最终会写一个：hover或a：visited。

#5

:visited is a pseudo class selector used only for anchor link elements that matches when the href attribute of that anchor link has been visited in the past by this browser. It is meant to be useful feedback for a user, so they can tell the difference between links they have been to and links they have not.

：visited是一个伪类选择器，仅用于当此浏览器过去访问过该锚链接的href属性时匹配的锚链接元素。它意味着对用户来说是有用的反馈，因此他们可以区分他们所处的链接和他们没有的链接。

REFERENCE

参考

The syntax of a pseudo class is as follows

伪类的语法如下

selector:pseudo-class {
    property:value;
}

So you have to use a selector when using a pseudo class and since it supports only links, in this case, the selector would be a.

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

#1