博客
关于我
超链接的Lvfha
阅读量:345 次
发布时间:2019-03-04

本文共 944 字,大约阅读时间需要 3 分钟。

超链接的Lvfha

lvfha表示超链接的五种状态,也是5个伪类,lvfha表示应用这5个伪类为超链接添加样式时应该遵守的原则性顺序

a                  处于任意状态的超链接a:link           设置还没有访问过的超链接样式a:visited      设置访问以后的超链接样式a:focus        设置获取到鼠标焦点的超链接的样式,一旦鼠标点击其余位置,则马上切换到visited状态a:hover        设置鼠标悬浮的超链接样式a:active        设置鼠标按下时的超链接样式

其中focus, hover, active不太好区分,focus是一种延续性状态,而hover, active是短暂性状态

正因为focus是一种延续性状态,所以要放在短暂性的hover, active之前,否则最后鼠标划过时不会表现出hover样式(因为这些样式都是针对a标签设定的,根据层叠规则,先声明的hover会被focus覆盖掉)

linkvisited是互斥的,不存在重叠,并且这两者属于永久性状态

为了让短暂性状态和持续性状态有表现机会,就把focus/hover/active放在link/visited后面,让长状态的层叠优先级更低一些,所以就有了lvfha原则

注意:如果各个状态下设置的样式存在冲突(设置有相同样式名的不同值),则需要严格遵守lvfha原则;如果不存在样式冲突,则可以不按照该规则执行

例如:下面的悬浮样式将永远不会生效,因为被覆盖掉了

a:hover {   text-decoration: underline overline;}a:link {   text-decoration: none;}a:visited {   text-decoration: none;}

参考:

[1] http://www.ayqy.net/doc/css2-1/selector.html#dynamic-pseudo-classes
[2] http://www.ayqy.net/blog/%E8%B6%85%E9%93%BE%E6%8E%A5%E7%9A%84lvha%E5%8E%9F%E5%88%99/

转载地址:http://fpdr.baihongyu.com/

你可能感兴趣的文章
Mac OS X 下 su 命令提示 sorry 的解决方法
查看>>
vue-router 缓存路由组件对象
查看>>
移动端 触摸事件和mousedown、mouseup、click事件之间的关系
查看>>
js中事件捕获和事件冒泡(事件流)
查看>>
js的各种数据类型判断(in、hasOwnProperty)
查看>>
严格模式、混杂模式与怪异模式
查看>>
一篇文章带你搞定 Java 中字符流的基本操作(Write / Read)
查看>>
HTML 和 CSS 简单实现注册页面
查看>>
(Java)让枚举实现一个接口
查看>>
XML 解析学习
查看>>
验证码的简单实现
查看>>
解决 vscode 窗口故障
查看>>
JSP 入门学习
查看>>
JSP,EL 和 JSTL 一篇文章就够了
查看>>
(延迟初始化)Lazy 初始化
查看>>
(Java 剑指 offer)二维数组中的查找
查看>>
(SpringMVC)springMVC.xml 和 web.xml
查看>>
Oracle 学习一篇文章就够了(珍藏版)
查看>>
一篇文章带你搞定 Oracle 的体系结构
查看>>
Oracle 单行函数
查看>>