小议常被忽略的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
小议常被忽略的a标签:visited属性的特殊用法的更多相关文章
- 容易被忽略的label标签
# 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.a ...
- HTML标签CSS属性默认值汇总
HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...
- HTML初学者常用标签及属性
1.HTML5头部结构 [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行. [meta标签] 1-charset属性:单独 ...
- HTML基础篇(标签和属性整--已剔除不被浏览器支持的部分)
行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...
- css标签及属性
css标签及属性 HTML引入CSS的方法 1.嵌入式 <style type = “text/css”>要写的样式</style> 2.外联式 <link rel ...
- HTML5的Video标签的属性,方法和事件汇总
<video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...
- php 内置支持的标签和属性
内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,ty ...
- video标签的属性和方法总结
最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
随机推荐
- Springboot2.x 集成redis
pom.xml 添加 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- acm模板生成
为迎接,接下来的区域赛,要做好准备(虽然不是特别有信心,但是还是要鼓励自己,可以取得收获的,加油) acm_latex模板: https://www.cnblogs.com/palayutm/p/64 ...
- BZOJ 3555: [Ctsc2014]企鹅QQ
似乎大家全部都用的是hash?那我讲一个不用hash的做法吧. 首先考虑只有一位不同的是哪一位,那么这一位前面的位上的字符一定是全部相同,后面的字符也是全部相同.首先考虑后面的字符. 我们对n个串的反 ...
- ClickOnce部署winform
1.完成winform程序. 示例: 2.项目->属性->发布. 有关ftp在iis中的配置,请参考:IIS中添加ftp站点 :url也需在iis中配置.flashfxp中显示ftp成功 ...
- UVa 1149 装箱
https://vjudge.net/problem/UVA-1149 题意:给定N个物品的重量和背包的容量,同时要求每个背包最多装两个物品.求至少需要的背包数. 思路:很简单的贪心.每次将最轻的和最 ...
- Python time模块详解--转载
1.在Python中,通常有这几种方式来表示时间:1)时间戳 2)格式化的时间字符串 3)元组(struct_time)共九个元素.由于Python的time模块实现主要调用C库,所以各个平台可能有所 ...
- Java中创建只读容器,同步容器
我们通过Collections.unmodifiableX来得到只读容器,因为容器被设为只读的,所以必须填入有意义的数据之后才进行设置 import java.util.ArrayList; impo ...
- ubuntu16.04上安装Java
1.下载jdk8 登录网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 选择 ...
- [原][OSG][osgBullet][osgworks][bullet]编译osgBullet尝试物理引擎
相关网址: 类似文章:http://blog.csdn.net/lh1162810317/article/details/17475297 osgBullet官网:http://osgbullet.v ...
- 快速幂模n运算
模运算里的求幂运算,比如 5^596 mod 1234, 当然,直接使用暴力循环也未尝不可,在书上看到一个快速模幂算法 大概思路是,a^b mod n ,先将b转换成二进制,然后从最高位开始(最高位一 ...