小议常被忽略的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>
只要用户的机器访问过比如www.taobao.com，访问该页面时候，就会利用background-image发送xxxxx.jpg#taobao这样的请求，这样服务端，就可以通过hashid收集并统计用户的访问历史记录了。
这里google.com因为访问的是google.com.hk，所以没有请求，只有#taobao一个访问记录。
转载于:https://www.cnblogs.com/xueduanyang/archive/2010/11/09/1873110.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！