正文
<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链接,用来告诉用户 ...
随机推荐- vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
- JqueryUI-1
本文在于巩固基础 学习网址:http://jqueryui.com/ 基本概念:jQuery UI[是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画. ...
- CS231n 第一次作业KNN中本地CIFAR10数据集的载入
一.问题描述 网上绝大多数作业参考都是在jupyter下运行的,数据集载入过程一般如下: from cs231n.data_utils import load_CIFAR10 #导入数据集,并打印出数 ...
- [转] Shader Blending
引用:1.Unity3D shader Blending2.[风宇冲]Unity3D教程宝典之Shader篇:第十三讲 Alpha混合 混合(Blending)是计算机呈现渲染结果的最后阶段,每一个像 ...
- Mycat节点扩缩容及高可用集群方案
数据迁移与扩容实践: 工具目前从 mycat1.6,准备工作:1.mycat 所在环境安装 mysql 客户端程序. 2.mycat 的 lib 目录下添加 mysql 的 jdbc 驱动包. 3.对 ...
- tkinter做一个简单的登陆页面（十六）
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- php 常用函数总结
1. is_numeric() // 判断变量是不是数字或者数字字符串 2. array_column() // 获取某一列 3. array_search() // array_search(val ...
- 根据科目计算父科目ID，并递归累计求父科目的金额
通常情况下,我们会从外部系统或者其他数据源得到以下树形结构的数据,并需要对其进行处理 其中,需要做的处理包括 1.计算每个科目的父科目ID,即PARENT_ID; 2.计算每个科目的ITEM_LEVE ...
- IP网络设计
一.总体规划 网络设计的分层思想 按照网络设计的分层思想,通常将网络分为:核心层.汇聚层和接入层三个部分.这三部分在功能上有明显差别 ,因此在IP设计上,有必要对这三个部分区别对待. 二.核心层 核心 ...
- springboot日志框架
Spring Boot日志框架Spring Boot支持Java Util Logging,Log4j2,Lockback作为日志框架,如果你使用starters启动器,Spring Boot将使用L ...
常见的color, font-family, background 等css属性都能够设置链接的样式,a链接的特殊性在于能够根据它们所处的状态来设置它们的样式.a标签与人交互的4个状态属于伪类状态切换 ...
A标签的css样式 CSS为一些特殊效果准备了特定的工具,我们称之为“伪类”.其中有几项是我们经常用到的,下面我们就详细介绍一下经常用于定义链接样式的四个伪类,它们分别是: :link :v ...
link 有链接属性时visited 链接地址已被访问过active 被用户激活(在鼠标点击与释放之间发生的事件)hover 其鼠标悬停 <!DOCTYPE ...
在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...
刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的 ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
爱恨分明原则: l v h a 注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 ! 注释:为了产生预期的效果,在 CSS 定义中,a ...
a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...
- vue-route+webpack部署单页路由项目，访问刷新出现404问题
问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...
- JqueryUI-1
本文在于巩固基础 学习网址:http://jqueryui.com/ 基本概念:jQuery UI[是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库.包含底层用户交互.动画. ...
- CS231n 第一次作业KNN中本地CIFAR10数据集的载入
一.问题描述 网上绝大多数作业参考都是在jupyter下运行的,数据集载入过程一般如下: from cs231n.data_utils import load_CIFAR10 #导入数据集,并打印出数 ...
- [转] Shader Blending
引用:1.Unity3D shader Blending2.[风宇冲]Unity3D教程宝典之Shader篇:第十三讲 Alpha混合 混合(Blending)是计算机呈现渲染结果的最后阶段,每一个像 ...
- Mycat节点扩缩容及高可用集群方案
数据迁移与扩容实践: 工具目前从 mycat1.6,准备工作:1.mycat 所在环境安装 mysql 客户端程序. 2.mycat 的 lib 目录下添加 mysql 的 jdbc 驱动包. 3.对 ...
- tkinter做一个简单的登陆页面（十六）
做一个简单的登陆页面 import tkinter wuya = tkinter.Tk() wuya.title("wuya") wuya.geometry("900x3 ...
- php 常用函数总结
1. is_numeric() // 判断变量是不是数字或者数字字符串 2. array_column() // 获取某一列 3. array_search() // array_search(val ...
- 根据科目计算父科目ID，并递归累计求父科目的金额
通常情况下,我们会从外部系统或者其他数据源得到以下树形结构的数据,并需要对其进行处理 其中,需要做的处理包括 1.计算每个科目的父科目ID,即PARENT_ID; 2.计算每个科目的ITEM_LEVE ...
- IP网络设计
一.总体规划 网络设计的分层思想 按照网络设计的分层思想,通常将网络分为:核心层.汇聚层和接入层三个部分.这三部分在功能上有明显差别 ,因此在IP设计上,有必要对这三个部分区别对待. 二.核心层 核心 ...
- springboot日志框架
Spring Boot日志框架Spring Boot支持Java Util Logging,Log4j2,Lockback作为日志框架,如果你使用starters启动器,Spring Boot将使用L ...
