<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!”。

  

  

<a>链接的四个伪类顺序的更多相关文章

  1. a链接四种伪类状态切换实现人机交互

    常见的color, font-family, background 等css属性都能够设置链接的样式,a链接的特殊性在于能够根据它们所处的状态来设置它们的样式.a标签与人交互的4个状态属于伪类状态切换 ...

  2. a标签的四个伪类

    A标签的css样式   CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link    :v ...

  3. a 标签的四个伪类

    link        有链接属性时visited    链接地址已被访问过active     被用户激活(在鼠标点击与释放之间发生的事件)hover      其鼠标悬停 <!DOCTYPE ...

  4. 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序

    在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...

  5. 你知道hover、active这四个伪类为什么要按顺序写吗

    刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...

  6. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  7. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  8. a标签的四个伪类是什么?如何排序?为什么?

    爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...

  9. a:link a:visited a:hover a:active四种伪类选择器的区别

    a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...

随机推荐

  1. javascript严格模式

    设立"严格模式"的目的,主要有以下几个: 1. 消除Javascript语法的一些不合理.不严谨之处,减少一些怪异行为; 2. 消除代码运行的一些不安全之处,保证代码运行的安全: ...

  2. EC笔记,第二部分:10.让=返回指向*this的引用

    Effective C++ 学习笔记 10 让=返回指向*this的引用 Table of Contents 1. 原因 2. 建议:在没有充分理由标新立异前,最好的做法是遵从传统. –by SkyF ...

  3. Null value was assigned to a property of primitive type setter of

    在SSH项目的开发中遇到了下面的错误: 检查后发现数据库和映射文件中这个字段是允许为空的,为什么还要出错呢?原来是因为这个字段是int的,int是基本类型,即使设置成可以为空也不能取空值. 解决的办法 ...

  4. Java中,包的概念、常量、静态成员、继承

    新建包:左上角-新建-包 命名规则(通常从大到小,方便整合不容易冲突)  例如:com.itnba.maya.test package必须在最顶行,之前不能再有其他代码 使用包: 快捷方式:使用包中的 ...

  5. PHP流程控制之特殊结构

    在前两节介绍的循环结构中,都是通过循环语句本身提供的条件表达式来指定循环次数执行代码块直到停止循环.但如果想在循环体执行过程中中止循环,或是跳过一些循环继续执行其他代码块,我们就需要一些特殊的流程控制 ...

  6. WAMPServer安装和配置

    1. 下载地址:  www.wampserver.com    www.php100.com 本机下载在 安装在 2. 自定义网站根目录 设置到这里 访问localhost就会访问到自定义的目录了假设 ...

  7. SVN版本控制系统学习(中文配置)

    先吐槽下往上搜索的一些SVN下载地址,里面乱七八糟啥都有,下载好后点击安装一不注意啥玩意都安装上了, 什么玩意都有,真心不明白这些推送者是怎么想的.搜集了一个WIN32的百度网盘下载地址: http: ...

  8. arcgis api for flex之专题图制作(饼状图,柱状图等)

    最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

  9. arcgis server之路网服务发布

    路网服务发布首先需要建立好道路的网络集,为了保证道路网络分析的准确性,建立网络集之前,要对道路图层进行拓扑差错,确保道路的连通性.具体操作流程为:道路拓扑差错-建立几何网络集-路网服务发布. 1.道路 ...

  10. 基本排序算法——基数排序java实现

    基数排序 package basic.sort; import java.util.Arrays; import java.util.Random; public class RadixSort { ...