: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