小议常被忽略的a标签:visited属性的特殊用法

CSS1/CSS2对于a定义了4个伪类，

:link a标签未访问时的样式

:active a标签mousedown时的样式

:hover a标签mouseover时的样式

:visited a标签访问过之后样式

对于hover属性，当然是最常用的，恰恰相反的与之对应的就是visited属性，基本很少有人提及。

a:visited从使用意义来说，是指用户访问过某一个链接之后，该链接的a标签将呈现对应:visited属性定义的样式。

这里的重点在于链接，经过测试发现

   1: <html>   2:     <head>   3:         <style>   4:             a:link{   5:                 color:blue;   6:             }   7:             a:visited{   8:                 color:red;   9:             }  10:         </style>  11:     </head>  12:     <body>  13:         <a id="a1" href="#test1"></a>  14:         <a id="a2" href="#test1"></a>  15:         <a id="a3" href="#test3"></a>  16:     </body>  17: </html>

点击a1之后的同时，a2也会应用visited的样式，但是a3不会。

可以得出这样的结论，a:visited是与URL有关，而与单个的a标签无关

利用这点，我们可以大胆的做一下尝试。

应用场景A：

对于一个抽奖应用，按钮点击过一次之后，下方给予提示“您已参加过抽奖”

   1: <html>   2:     <head>   3:         <style>   4:             a.lottery:link{   5:                 display:block;   6:                 width:100px;   7:                 height:20px;   8:                 border:1px solid #ccc;   9:             }  10:             a.lottery-over:link{  11:                 display:none;  12:             }  13:             a.lottery-over:visited{  14:                 display:block;  15:                 color:red;  16:             }  17:         </style>  18:     </head>  19:     <body>  20:         <div>  21:             <a class="lottery" href="#lotter">抽奖开始</a>  22:             <a class="lottery-over" href="#lotter">您已经参加过本次抽奖了</a>  23:         </div>  24:     </body>  25: </html>

效果如下

点击之后，

只要url相同，且被浏览器访问过，我们就可以使用a:visited做容器，在页面的任何位置，做各种展示效果。

应用场景B：

利用a:visited只依赖于URL的特点，我们还可以实现，隐私收集这样的功能。

   1: <html>   2:     <head>   3:         <style>   4:             .collect{   5:                 display:block;   6:                 height:0;   7:                 width:0;   8:             }   9:             a.taobao:visited{  10:                 background-image:url('http://a.tbcdn.cn/app/search/logo.png#taobao')  11:             }  12:             a.google:visited{  13:                 background-image:url('http://a.tbcdn.cn/app/search/logo.png#google')  14:             }  15:         </style>  16:     </head>  17:     <body>  18:         <div class="collect">  19:             <a class="taobao" href="http://www.taobao.com"></a>  20:             <a class="google" href="http://www.google.com"></a>  21:         </div>  22:     </body>  23: </html>