<a>链接的四个伪类顺序
<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>链接的四个伪类顺序的更多相关文章
- a链接四种伪类状态切换实现人机交互
常见的color, font-family, background 等css属性都能够设置链接的样式,a链接的特殊性在于能够根据它们所处的状态来设置它们的样式.a标签与人交互的4个状态属于伪类状态切换 ...
- a标签的四个伪类
A标签的css样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :v ...
- a 标签的四个伪类
link 有链接属性时visited 链接地址已被访问过active 被用户激活(在鼠标点击与释放之间发生的事件)hover 其鼠标悬停 <!DOCTYPE ...
- 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序
在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...
- 你知道hover、active这四个伪类为什么要按顺序写吗
刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...
- 【CSS学习笔记】a标签的四种伪类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- a标签的四个伪类是什么?如何排序?为什么?
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
- a:link a:visited a:hover a:active四种伪类选择器的区别
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...
随机推荐
- anonymousIdentification 与匿名访问
anonymousIdentification 元素(ASP.NET 设置架构) 来自 <https://msdn.microsoft.com/zh-cn/library/91ka2e6a(v= ...
- 速战速决 (6) - PHP: 获取 http 请求数据, 获取 get 数据 和 post 数据, json 字符串与对象之间的相互转换
[源码下载] 速战速决 (6) - PHP: 获取 http 请求数据, 获取 get 数据 和 post 数据, json 字符串与对象之间的相互转换 作者:webabcd 介绍速战速决 之 PHP ...
- html 空链接 href="#"与href="javascript:void(0)"的区别
#包含了一个位置信息 默认的锚是#top 也就是网页的上端 而javascript:void(0) 仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#但跳动到了页首 而javascrip ...
- ABySS非root权限安装
本文转自 http://yangl.net/2015/11/12/abyss_install/ ABySS: ABySS is a de novo, parallel, paired-end seq ...
- PHP流程控制之特殊结构
在前两节介绍的循环结构中,都是通过循环语句本身提供的条件表达式来指定循环次数执行代码块直到停止循环.但如果想在循环体执行过程中中止循环,或是跳过一些循环继续执行其他代码块,我们就需要一些特殊的流程控制 ...
- 10、ASP.NET MVC入门到精通——Model(模型)和验证
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 模型就是处理业务,想要保存.创建.更新.删除的对象. 注解(通过特性实现) DisplayName Required StringLengt ...
- java web学习总结(十六) -------------------数据库连接池
一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...
- Hibernate(十)__缓存机制
为什么需要缓存? 缓存的作用主要用来提高性能,可以简单的理解成一个Map: 使 用缓存涉及到三个操作:把数据放入缓存.从缓存中获取数据. 删除缓存中的无效数据. 从上图看出: 当我们去查询对象的时候, ...
- 软件开发流程 Software development process
软件开发流程(Software development process)即软件设计思路和方法的一般过程,包括设计软件的功能和实现的算法和方法.软件的总体结构设计和模块设计.编程和调试.程序联调和测试以 ...
- javascript 实现一个回文数字
写一个方法,让"1234"变成回文数字“1234321”,就是顺着读和倒着读都是一样的:注:不让用reverse()方法: function palindrome(str){ va ...