:visited伪类设置不生效的原因

现代浏览器严重限制了开发人员可以在使用:visited链接伪类的样式规则中使用的CSS属性如果您不熟悉这种特殊的伪类,您可能想知道为什么网站的访问链接未按预期呈现。

1 /* 这并不会按设置的效果实现 */
2 a:visited {
3   display: block;
4   background-image: url("cat.jpg");
5 }

如果我们使用其他任何伪类(例如:hover伪类),则样式属性将按预期工作。

1 /* 完美实现 */
2 a:hover {
3   display: block;
4   background-image: url("cat.jpg");
5 }

当前,似乎可以分配给:visited伪类的唯一属性是该color属性。哦,即使您正确地使用rgba之类的标准颜色单位指定了浏览器,浏览器也极有可能不会使用alpha透明度来呈现该颜色

对吗?这是怎么回事?

该W3C规范的链接伪类技术使网页浏览器无视我们的选项:link:visited伪类样式规则。这是因为:visited伪类可能会以滥用者可以获取有关其访客浏览历史记录的数据的方式滥用

样式表作者可能会在用户不知情的情况下滥用:link和:visited伪类来确定用户访问了哪些站点。
因此,用户代理服务器可以将所有链接视为未访问的链接,或实施其他措施来保护用户的隐私,同时以不同的方式呈现已访问和未访问的链接。”
来源:选择器级别3:链接伪类::link和:visited

总之,目前Web浏览器中的趋势是仅支持渲染:visited选择器中设置的color属性任何其他CSS属性设置都将被忽略。

有关更多详见https://www.w3.org/TR/selectors-3/#the-link-pseudo-classes-link-and-visited

posted @ 2020-03-10 10:38  披发长歌览大荒  阅读(659)  评论(0编辑  收藏  举报