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

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

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

:active a标签mousedown时的样式

:hover a标签mouseover时的样式

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

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

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

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

<html>
    <head>
        <title></title>
        <style type="text/css">
            a:link{
                  color:blue;                  
            }
             a:visited{
                   color:red;
             }
        </style>
    </head>
    <body>
        <a id="a1" href="javascript:void(0);">test1</a>
        <a id="a2" href="javascript:void(0);">test2</a>
        <a id="a3" href="#test3">test3</a>
    </body>
</html>

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

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

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

应用场景A：

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

<html>
<head>
<style type="text/css">
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>

效果如下

点击之后，

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

应用场景B：

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

<html>
<head>
<style>
.collect {
    display: block;
    height: 0;
    width: 0;
}
a.taobao:visited {
    background-image: url('http://a.tbcdn.cn/app/search/logo.png#taobao')
}
a.google:visited {
    background-image: url('http://a.tbcdn.cn/app/search/logo.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收集并统计用户的访问历史记录了。

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

转载：http://www.cnblogs.com/xueduanyang/archive/2010/11/09/1873110.html