• <a>链接的四个伪类顺序


    摘自: http://www.cnblogs.com/xiayi/p/5350423.html

     <a>元素的作用是可以创建一个链接,链接对应4个状态:未访问,已访问,鼠标悬停,鼠标点击瞬间。

      为了给链接的4个状态应用样式,引入伪类的概念。

      什么是伪类呢?简单点说,就是你没定义这个类,但它确实作为一个类来使用。(这些类确实存在,浏览器在后台会向这些类增加和删除元素)

      我在看《CSS设计指南》时,它说到四个伪类的书写顺序一定要正确,否则浏览器可能不会显示预期的结果。

      也即这样写:

    a:link{color:black;}
    a:visited{color:gray;}
    a:hover{color:red;}
    a:active{color:blue;}

       为什么必须得按顺序呢?

      这个问题可以这样来解答。

      首先注意关键的两点:1.这4个伪类特指度相同。2.一个链接可能同时处于多种状态,即同时属于多个伪类。

      好,现在来详细剖析。

      未点击链接前,link伪类长期处于激活状态,鼠标悬停(或点击)时,<a>链接同时处于link和hover(或active)状态,由于它们特指度相同,在同时激活的情况下,后出现的伪类样式会覆盖前面的伪类样式,故link状态必须写在hover(或active)之前。

      再讨论hover和active的顺序,若把hover放在active后面,当点击链接一瞬,实际你在激活active状态的同时触发了hover伪类,hover在后面覆盖了active的颜色,所以无法看到active的颜色。故hover在active之前

      其次,若把visited放在hover后面,那已访问过的链接一直触发着visited伪类,会覆盖hover样式。

      最后,其实link、visited两个伪类之间顺序无所谓。(因为它俩不可能同时触发,即又未访问同时又已访问。)

      记这顺序有个小招数,“LoVe? HA!”。

  • 相关阅读:
    Asp.net获取客户端的IP地址排除::1
    EF 筛选列包含NULL会报错
    layUI关于table编辑列支持方向键功能
    .NET CORE 发布IIS问题收集
    VS2019最新源代码管理工具+附下载地址
    关于Mysql可视化工具Navicat Premium12激活使用【亲测】
    经典SQL 语句
    事务的四种隔离级别 [转载]
    HTML 特殊符号编码对照表
    github本地文件Push到仓库
  • 原文地址:https://www.cnblogs.com/facial/p/5816186.html
Copyright © 2020-2023  润新知