超链接的Lvfha
发布日期:2021-05-07 16:40:48 浏览次数:12 分类:原创文章

本文共 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/

上一篇:css实现多列等高
下一篇:DOCTYPE

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2025年03月31日 14时42分09秒