:link 伪类确实匹配访问过的链接答案

【问题标题】：The :link pseudo-class does match visited links:link 伪类确实匹配访问过的链接
【发布时间】：2020-01-10 09:06:19
【问题描述】：

我在阅读有关 CSS 伪类的文章时遇到了 :link 伪类。

每个人都说:link 伪类匹配具有“href”属性并且尚未访问过的链接元素。

第一个条件在我检查时为真，但显然第二个条件（仅匹配未访问的链接）并非如此（至少在谷歌浏览器中），如下图所示：

这是怎么回事？

【问题讨论】：

标签： html css pseudo-class

【解决方案1】：

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

因此，用户代理可能会将所有链接视为未访问的链接，或实施其他措施保护用户的隐私，同时以不同的方式呈现已访问和未访问的链接。

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

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

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

颜色

背景色

border-color（及其子属性）

列规则颜色

轮廓颜色

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

此外，即使对于上述样式，您也无法更改未访问链接和已访问链接之间的透明度，否则您将能够使用 rgba()、hsla() 或 transparent 关键字。 ^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;
}

&lt;a href="#"&gt;a link&lt;/a&gt;

【讨论】：

【解决方案2】：

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

限制的原因是出于隐私原因。你可以看到更多关于访问限制here

【讨论】：

我没有更改 :visited 选择器中的字体大小。
@AmirHosseinAhmadi 是的，我知道这一点，但在您的原始示例中（在编辑之前），您将 font-size 显示为您想要编辑的内容。我不确定为什么这个答案多次被否决，尽管我已经指出了与后续答案相同的隐私原因。如果那些投反对票的人想说明他们投反对票的原因，那将是最有用的。