小议常被忽略的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:                 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>

效果如下

image

点击之后,

image

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

应用场景B:

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

   1: <html>
   2:     <head>
   3:         <style>
   4:             .collect{
   5:                 display:block;
   6:                 height:0;
   7:                 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收集并统计用户的访问历史记录了。

image

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

原文地址:https://www.cnblogs.com/xueduanyang/p/1873110.html