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属性的特殊用法的更多相关文章

  1. 容易被忽略的label标签

    # 容易被忽略的label标签 ## 原始作用 `label`标签是HTML原生的标签,其原始的作用参考[这里](http://www.w3school.com.cn/tags/tag_label.a ...

  2. HTML标签CSS属性默认值汇总

    HTML标签CSS属性默认值,在你需要还原默认值的时候比较有用. 以前一直在找这份文档,今天偶然在网上看到了.除了inline和block的定义,主要是要注意body|h1~h6|blockquote ...

  3. HTML初学者常用标签及属性

    1.HTML5头部结构   [DOCTYPE html] 声明文档类型为HTML5文件. 文档声明在HTML5文档必不可少,且必须放在文档的第一行.   [meta标签] 1-charset属性:单独 ...

  4. HTML基础篇（标签和属性整--已剔除不被浏览器支持的部分）

    行内元素有:a b span img input select strong 块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p HTML 参考手册- (HTML5 标 ...

  5. css标签及属性

    css标签及属性 HTML引入CSS的方法 1.嵌入式  <style type = “text/css”>要写的样式</style> 2.外联式  <link rel ...

  6. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  7. php 内置支持的标签和属性

    内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,ty ...

  8. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  9. 第四节：Vue表单标签和组件的基本用法，父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

随机推荐

  1. SNMP学习笔记之SNMPv3的报文格式以及基于USM的认证和加密过程

    下面我们就主要讲解SNMPv3的报文格式以及基于USM的认证和加密过程! 1.SNMPv3的消息格式 如下图1: 图 1 其中,整个SNMPv3消息可以使用认证机制,并对EngineID.Contex ...

  2. swagger报错No handler found for GET /swagger-ui.html

    今天下载jeeweb框架下来研究,其他还有,就是swagger老是出不来.报错:No handler found for GET /swagger-ui.html 后来搜索才发现,这个错误,是因为资源 ...

  3. POJO/VO/DTO等对象模型

    JavaBean 要想成为JavaBean,需要满足以下条件: 1,提供一个默认的无参构造函数. 2,需要被序列化并且实现了Serializable接口. 3,可能有一系列可读写属性伴随"g ...

  4. Ubuntu下使用face_recognition进行人脸识别

    Face Recognition是一个基于Python的人脸识别库,在github上地址如下:https://github.com/ageitgey/face_recognition. 看着挺好玩,本 ...

  5. kubernetes extension point

    以下大部分来自于k8s document, 笔者只是总结归纳, 解释不足的地方请参阅相关文档 Intention Non-sustainable way to customize Kubernetes ...

  6. 20145301赵嘉鑫《网络对抗》Exp8 Web基础

    20145301赵嘉鑫<网络对抗>Exp8 Web基础 基础问题回答 什么是表单? 表单是一个包含表单元素的区域,主要负责数据采集部分.表单元素允许用户在表单中输入信息.一个表单有三个基本 ...

  7. ubuntu下桌面假死处理方法(非重启)

    一.背景 2018/05/22,就在这一天,进入ubuntu的桌面后随便点击任何位置均无法响应,此时又不想重启,遂出此文 二.解决方案 2.1 关掉Xorg进程 2.1.1按下ctrl+alt+F1进 ...

  8. php跨域

    <?php header('Content-type:text/html; charset="utf-8"'); $url = 'http://10.32.41.194:80 ...

  9. [Java] - MySQL数据库的时间设置问题.

    之前有朋友做的项目时间格式设置为String,我感觉很不好,随后自己试了试. 首先在设置数据库类型时,选择的是timestamp, 而Java的实体中设置时间的属性类型为Date, (java.uti ...

  10. [Shiro] - shiro之SSM中的使用

    在学习shiro的途中,在github发现了一个开源项目,所需的控件刚好是自己要学习的方向. 虽然还要学习完ssm的shiro与springboot的shiro,以及接下来的种种控件和类库,但学习这个 ...