:link 伪 class 确实匹配访问过的 links

Question

我正在阅读有关 CSS 伪classes 的文章，我遇到了 :link 伪class。

每个人都说 :link 伪 class 匹配具有 "href" 属性和的 link 元素'尚未访问过。

第一个条件在我检查出来时为真，但显然第二个条件（仅匹配未访问的 links）不是这种情况（至少 Google Chrome ) 如下图所示：

这是怎么回事？

Answer 1

:visited 伪选择器可以更改许多属性（例如 color、background-color），但不幸的是 font-size 不是其中之一。这就是为什么即使您在 :visited 代码中设置它也不会更改您的字体大小。

限制的原因是出于隐私原因。您可以查看更多关于访问限制的信息 here

Answer 2

这有点令人困惑，但如果你参考 the specification 你会发现：

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.

这就是这里发生的事情。诀窍是创建一些限制以避免已访问和未访问链接的样式之间存在大差异。

从技术上讲，您将应用于 a:link 的所有样式也将应用于 a:visited，除非您在 a:visited 中覆盖它们，并且您仅限于可以在其中应用的样式:visited 所以你不能覆盖所有内容：

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

border-color (and its sub-properties)

column-rule-color

outline-color

The color parts of the fill and stroke attributes

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

这里举例说明：

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>

我们只能稍微改变行为，从已访问到未访问。基本上，我们只允许更改一些颜色。

由此你也可以推断出a:link和a差不多¹。不同之处在于第一个将仅针对指定 href

的链接

¹：a:link 或 :link 比 a

更具体

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

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

:link 伪 class 确实匹配访问过的 links

The :link pseudo-class does match visited links

html

css

pseudo-class