a标签伪类：visited下划线设置无效的原因及如何解决

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了a标签伪类：visited下划线设置无效的原因及如何解决相关的知识，希望对你有一定的参考价值。

今天第一次加入了个前端群，作为一名萌新，看到有群友提问“怎样取消a点击后的下划线？”，顿感这不是很简单的问题嘛，于是抢答“a:visited{text-decoration:none;}”,谁料这是无效的！源码（浏览器为chorme53.0.2785.143）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

　　　　a:visited{ text-decoration: none; }
 　　</style> 
</head>
<body>
　　<a href="https://www.baidu.com">面向编程</a>
 </body>
</html>

后又在FF上实验了一下也是如此，a:visited伪类文本装饰失效是为什么呢？怀着迷茫的心情我运用面向Baidu编程技术借鉴前人经验，发现也有很多人曾对此提出疑问，有些人说是浏览器缓存结果，有的说是lvha伪类层叠效果（跟这无关，我曾严格按照这个关系实验仍无效）导致，最后我找到了一部分webkit关于a:visited的文字：

　　WebKit is prone to an information-disclosure vulnerability. This issue occurs when Cascading Style Sheets (CSS) use the ‘:visited‘ pseudo-class. Attackers 　　may determine which sites a user has visited.

　　NOTE: This issue was previously covered in BID 40620

(Apple Safari Prior to 5.0 and 4.1 Multiple Security Vulnerabilities) buthas been given its own record to better document it.

　　Both the next release versions of Gecko (tentatively named Firefox 3.7) and WebKit (Safari 5) will
　　implement changes to the handling of the :visited pseudo-class. Google Chrome will, I suppose, also
　　implement this.

　　In short, those browsers will limit the ways the a:visited state can be styled. Color,
　　background-color, and to some extend, outline, border are not affected, as long as you don‘t use
　　alpha-transparency (rgba()), change the border-style or border-width, etc. Other changes will be
　　ignored and fall back to what is specified for the a:link state.

其大意就是a:visited伪类可能会暴露用户浏览信息记录，攻击者可能会据此判断用户曾经访问过的网站，造成不必要的损失，因此这些浏览器决定限制a:visited的功能，所以不是代码的问题，而是浏览器方面的限制。

所以，若是用下划线来判断某链接是否曾被点击过是失效的，那么我们就只能通过设置颜色来区别了，这时候我们就要严格遵从lvha规则了。但在写小demo学习时又会发现有时候页面在经过改动后刷新会自动显示链接的颜色为：visited设置中的颜色，这是因为浏览器缓存的原因，在做小demo时可采用头部meta编码使其不再保留缓存：

<meta   http-equiv="Expires"   CONTENT="0">
<meta   http-equiv="Cache-Control"   CONTENT="no-cache">
<meta   http-equiv="Pragma"   CONTENT="no-cache">

以便测试。

以上是关于a标签伪类：visited下划线设置无效的原因及如何解决的主要内容，如果未能解决你的问题，请参考以下文章