css - 使用元素的伪元素的复杂行为

Question

我有这样的代码:

a:link {
  background-color: pink;
  color: yellow;
}

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

:link 伪类适用于尚未访问过的链接。因此，我认为访问后链接中取消了background-color和color属性。

https://drafts.csswg.org/selectors-3/#linkThe :link pseudo-class applies to links that have not yet been visited.

但实际上，background-color 属性依然存在。还有，字母的颜色是不是变回原来的蓝色而不是紫色了？

这是已报告的已知错误吗？还是规范中还有其他因素？这在大多数现代浏览器上都是可重现的，但在任何浏览器中都没有发现任何错误票据来证明这是一个错误。

---

我还发现被访问的背景干扰了链接，但这不是直观的，但它是规范的吗？

a:link {
  color: yellow;
}

a:visited {
  background: black;
  color: red;
}

<a href="#">link</a>
<br>
<a href="">link</a>-why background not work?
<br>
<a>link</a>

---

更新

我收到了一条关于隐私限制的评论。不过就MDN文章来说，主要是对background-image属性的约束，应该不会影响background-color属性，所以这个应该与隐私约束无关。

https://developer.mozilla.org/en-US/docs/Web/CSS/:visited#Styling_restrictions

For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:

• Allowable CSS properties are color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.

如果没有默认样式表，我不相信应用不应该应用的伪类样式。

Answer 1

:visited由于 privacy reasons，您可以对其应用 CSS 样式限制。 .

但是，具有讽刺意味的是，如果您将 background 应用到元素本身，则可以通过 覆盖样式: visited 伪选择器。这与 :link:

相同

a {
  background: blue; /* Required */
}

a:link {
  background: red;
  color: yellow;
}

a:visited {
  background: black;
  color: red;
}

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