小议常被忽略的a标签:visited属性的特殊用法
2010-11-09 21:54
260 查看
CSS1/CSS2对于a定义了4个伪类,
a:visited从使用意义来说,是指用户访问过某一个链接之后,该链接的a标签将呈现对应:visited属性定义的样式。
这里的重点在于链接,经过测试发现
点击a1之后的同时,a2也会应用visited的样式,但是a3不会。
可以得出这样的结论,a:visited是与URL有关,而与单个的a标签无关
利用这点,我们可以大胆的做一下尝试。
应用场景A:
对于一个抽奖应用,按钮点击过一次之后,下方给予提示“您已参加过抽奖”
效果如下
点击之后,
只要url相同,且被浏览器访问过,我们就可以使用a:visited做容器,在页面的任何位置,做各种展示效果。
应用场景B:
利用a:visited只依赖于URL的特点,我们还可以实现,隐私收集这样的功能。
只要用户的机器访问过比如www.taobao.com,访问该页面时候,就会利用background-image发送xxxxx.jpg#taobao这样的请求,这样服务端,就可以通过hashid收集并统计用户的访问历史记录了。
这里google.com因为访问的是google.com.hk,所以没有请求,只有#taobao一个访问记录。
:link a标签未访问时的样式
:active a标签mousedown时的样式
:hover a标签mouseover时的样式
:visited a标签访问过之后样式
对于hover属性,当然是最常用的,恰恰相反的与之对应的就是visited属性,基本很少有人提及。:active a标签mousedown时的样式
:hover a标签mouseover时的样式
:visited a标签访问过之后样式
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:
对于一个抽奖应用,按钮点击过一次之后,下方给予提示“您已参加过抽奖”
<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>
效果如下
点击之后,
只要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一个访问记录。
相关文章推荐
- 小议常被忽略的a标签:visited属性的特殊用法
- linux学习第六十四篇:Shell脚本中的逻辑判断,文件目录属性判断, if特殊用法,case判断
- shell脚本结构、date命令、变量 shell脚本中的逻辑判断 文件目录属性判断 if特殊用法 case判断
- iframe标签用法详解(属性、透明、自适应高度)
- Jquery css函数用法(判断标签是否拥有某属性)
- thinkphp特殊标签用法概述
- thinkphp特殊标签用法概述
- struts-tags标签特殊用法
- 关于<a>标签的基本用法和特殊用法
- HTML中的<video>标签的格式和其中的属性的用法
- shell脚本中的逻辑判断-文件目录属性判断-if特殊用法-case判断
- 20.5 shell脚本中的逻辑判断 文件目录属性判断 if特殊用法
- iframe标签用法详解(属性、透明、自适应高度)
- HTML标签的lang属性用法例子典型
- embed标签属性的介绍和用法
- 为html标签添加不存在的属性来达到一些特殊的好处
- struts2的便利标签:s:iterator标签的属性和用法
- html meta标签属性用法集合
- Html中meta标签的用法及viewport属性简介
- Shell编程(逻辑判断、文件目录属性判断、if特殊用法、case判断)