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 >面向編程</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:ThisissuewaspreviouslycoveredinBID40620
(AppleSafariPriorto5.0and4.1MultipleSecurityVulnerabilities)buthasbeengivenitsownrecordtobetterdocumentit.
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下划线设置无效的原因及如何解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hugo安装与部署
- 下一篇： 信用卡被风控上征信吗？90%的人都搞错了