CSS 偽類 (Pseudo-classes) 錨偽類:在支持 CSS 的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和滑鼠懸停狀態。 a:link {color: #FF0000} /* 未訪問的鏈接 */ a:visited {color: ...
CSS 偽類 (Pseudo-classes)
錨偽類:在支持 CSS 的瀏覽器中,鏈接的不同狀態都可以不同的方式顯示,這些狀態包括:活動狀態,已被訪問狀態,未被訪問狀態,和滑鼠懸停狀態。
a:link
{color: #FF0000} /* 未訪問的鏈接 */a:visited
{color: #00FF00} /* 已訪問的鏈接 */a:hover
{color: #FF00FF} /* 滑鼠移動到鏈接上 */a:active
{color: #0000FF} /* 選定的鏈接 */
對於a標簽的使用經常通過偽類來改變樣式,比如hover懸停後的background背景,font-size字體大小,text-decoration文本樣式(none去下劃線),color字體顏色等,但是在:visited下卻無法改變這麼多樣式。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .fi:hover{ 8 text-decoration: none; 9 color: green; 10 font-size: 20px; 11 background-color: red; 12 border: 1px solid black; 13 } 14 .se:visited{ 15 text-decoration: none;/*無效*/ 16 color: green; 17 font-size: 20px;/*無效*/ 18 background-color: red; /*這個按理來說應該有效*/ 19 border: 1px solid black;/*無效*/ 20 } 21 </style> 22 </head> 23 <body> 31 <a href="#qwe" class="fi">123465</a><br /> 32 <a href="#aasd" class="se">7890</a> 33 </body> 34 </html>
原因在於:visited的privacy concerns隱私保護。原文鏈接
許多年前,CSS:visited曾是一種查詢用戶歷史記錄的途徑,它自身並沒有什麼威脅,但是當其與js中的getComputedStyle()聯合,便可以通過你的歷史記錄找到你去過哪裡。其速度可達到210,000 URLs每分鐘,那麼就有可能獲得你大量的歷史信息或者通過指紋列印複製你的身份。由於瀏覽器可以保存很長一段時間的歷史記錄,這種方法可以暴露你相當一部分瀏覽信息。