：link伪类确实匹配访问的链接 [英] The :link pseudo-class does match visited links

问题描述

我正在阅读有关CSS伪类的信息，并且遇到了：link 伪类。

I was reading about CSS pseudo-classes and I came across the :link pseudo-class.

每个人都说：link 伪类与具有和属性的 href属性的链接元素相匹配。

Everyone says that the :link pseudo-class matches link elements that have an "href" attribute and haven't been visited yet.

第一个条件在我检出时为true，但显然第二个条件（仅匹配未访问的链接）（至少对于Google Chrome）不是这种情况下图：

The first condition is true as I checked it out, but apparently the second condition (only matching unvisited links) is not the case (at least with Google Chrome) as you can see in the picture below:

这里发生了什么？

推荐答案

这有点令人困惑，但是如果您引用该规范，您将找到：

It's a bit confusing but if you refer to the specification you will find:

UAs因此可能会处理全部链接作为未访问的链接，或实施其他措施保护用户的隐私，同时以不同的方式呈现已访问和未访问的链接。

UAs may therefore treat all links as unvisited links, or implement other measures to preserve the user's privacy while rendering visited and unvisited links differently.

这就是这里发生的情况。技巧是创建一些限制，以避免已访问链接和未访问链接的样式之间存在 big 差异。

This is what is happening here. The trick is to create some restrictions to avoid having a big difference between the styles of visited and unvisited links.

从技术上讲，您将应用于 a：link 也将适用于 a：visited ，除非您在 a：visited ，并且您限于可以在：visited 内部应用的样式，因此您无法覆盖所有内容：

Technically, all the styles you will apply to a:link will also apply to a:visited unless you override them inside a:visited and you are limited to the styles that you can apply inside :visited so you cannot override everything:

您可以设置访问链接的样式，但是可以使用的样式有限制。只能将以下样式应用于访问的链接：

You can style visited links, but there are limits to which styles you can use. Only the following styles can be applied to visited links:

• color


• background-color


• 边框颜色（及其子属性）


• 列规则颜色


• 轮廓颜色


• 填充和描边属性的颜色部分

• color
• background-color
• border-color (and its sub-properties)
• column-rule-color
• outline-color
• The color parts of the fill and stroke attributes

此外，即使对于上述样式，您也无法更改未访问链接和访问链接之间的透明度，否则您将可以使用rgba（），hsla（）或transparent关键字。 ^参考

In addition, even for the above styles, you won't be able to change the transparency between unvisited and visited links, as you otherwise would be able to using rgba(), hsla(), or the transparent keyword. ^ref

下面是一个示例来说明：

Here is an example to illustrate:

a:link {
  font-size:50px;
  border:2px solid red;
  color:black;
  padding:20px;
  box-shadow:5px 5px 0 blue;
  display:inline-block;
  margin:10px;
}
a:visited {
 color:red; /* this will work */
 border:5px dotted green; /* only the color will work */
 background:black; /* This will not work because we cannot change transparent to opaque value */
 
 /*All the below will not work*/
  padding:0;
  box-shadow:-5px -5px 0 purple;
  display:inline;
  margin:9584px;
  font-size:10px;
}

<a href="www.something.comg">not visited</a>

<a href="#">visited</a>

我们仅允许将行为从粘滞状态更改为未访问状态。基本上，我们只允许更改一些颜色。

We are only allowed to slightly change the behavior from vistied to unvisited. Basically, we are only allowed to changed some colors.

由此您还可以混淆 a：link 几乎是 ¹ 与 a 相同。区别在于，第一个仅定位到指定了 href

From this you can also conculde that a:link is almost¹ the same as a. The difference is that the first one will only target links with href specified

¹ ： a：link 或：link 比 a

:link {
 font-size:40px;
}
a {
 font-size:10px;
}

<a href="#">a link</a>

这篇关于：link伪类确实匹配访问的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！