我有这样的代码:
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/#link The :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.
如果没有默认样式表,我不相信应用不应该应用的伪类样式。
最佳答案
: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>
关于css - 使用元素的伪元素的复杂行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59130248/