• 小议常被忽略的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一个访问记录。

  • 相关阅读:
    python3编译安装no module named _ssl
    java中的、标识符、运算符以及数据类型之间的转换。
    Java中的基本数据类型
    java中的类和对象
    什么是JDK,JRE
    HTML是什么
    test
    Obtain older GMT versions
    How to understand three foundanmental faults?
    wilber3申请数据的直接目录寻找
  • 原文地址:https://www.cnblogs.com/xueduanyang/p/1873110.html
Copyright © 2020-2023  润新知