<a>标签伪类书写顺序为什么是lvha

最新推荐文章于 2022-08-05 11:44:27 发布
原创 最新推荐文章于 2022-08-05 11:44:27 发布 · 3k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细解释了HTML中a标签的四个伪类：:link、:visited、:hover及:active的作用及其应用顺序的原因。文章指出，这些伪类的顺序不仅符合用户交互逻辑，而且遵循了CSS中样式的覆盖原则。

a标签伪类的作用：

":link": a标签还未被访问的状态；

":visited": a标签已被访问过的状态；

":hover": 鼠标悬停在a标签上的状态；

":active": a标签被鼠标按着时的状态；

写样式时，为毛要按这个顺序写：

其实本质还是“同等优先权的样式，写在后边的会覆盖前边”，a标签的伪类只不过是又结合了不同的动作顺序，动作的触发顺序决定了伪类的顺序必须按lvha来写。

下面结合这4个伪类简单说下：

因为前2者两种状态是常态，而后2者是即时状态，当即时状态触发时，要覆盖常态，所以2个即时状态要放在后边；

因为在常态下：如果a标签被访问过后，就要呈现被访问过的状态，所以visited 要放在link后边；

因为鼠标按下时，伴随着悬停的a标签上，所以要想active覆盖hover，就必须把active放后边；


顺序记忆技巧：

lv包hao用


a标签伪类的作用及书写顺序是什么
09-28
为了在用户交互过程中改变`<a>`标签的视觉效果，CSS提供了四种伪类选择器，分别是`:link`、`:visited`、`:hover`和`:active`，这些伪类可以组合应用以实现不同状态下的样式变化。本文将详细探讨这些伪类的作用以及...
CSS中a标签样式的“爱恨”原则：定义链接样式的四个伪类
09-25
因此，`a:hover`和`a:active`伪类的样式可能会影响`a:link`和`a:visited`的效果，若书写顺序不当，则可能导致不预期的视觉效果。 在实际应用中，上述四种伪类的定义顺序必须遵守W3C（万维网联盟）的相关规范。例如...
你知道hover、active这四个伪类为什么要按顺序写吗
weixin_30384031的博客
06-27 347
刨根问底，你知道:hover等4个伪类为什么要按顺序排列吗 引言 :link,:visited,:hover,:active这4个伪类大家都不陌生，4个伪类要按照LvHa这个爱恨原则来排（外国友人起的记忆方法），不然有些效果会出问题。 但是你们都想过这几个属性为什么要按顺序排吗？ :link和:hover 当鼠标移动到a标签上时，会触发a标签上的:hover效果，但同时，此时的:li...
伪类选择器编写顺序以及注意事项
ruo980的博客
05-01 1819
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>伪类选择器顺序探究</title> <style type="text/css"> p:link { color: red; background-color:red; } p:visitd { color: yellow; background-color:yellow;
面试笔记（十三）---经常会使用到伪类的   a
刘群智的博客
07-27 232
  上面是伪类的正确顺序，简称 lvha(love-ha)。你一直知道这个顺序但是为什么这样呢？原理是怎么样的？  a:link{color:#f30;}  a:visited{color:#000;}  a:hover{color:#fff;}  a:active{color:#f99;} 原理　　 首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）  ...
伪类顺序 文本标签 无序排列有序排列
World peace的博客
04-15 621
一、伪类的顺序 涉及到a的伪类一共有四个 顺序： ：link ：visited ：hover ：active 四个选择器的优先级是一样的，顺序为L V H A ； 二、文本标签及样式 1、强调内容： 用于表示一段内容中的着重点（语气） 默认使用斜体显示 默认内容使用斜体显示（没有语义） 表示一个内容的重要性（语义） 默认使用粗体显示 默认内容使用粗体显示（没有语义） 2、小字体： 标签的内容会比...
<a>伪类执行顺序
luckyGirlIT的博客
07-09 376
a标签伪类顺序详解及CSS状态覆盖规则
本文标题“a标签伪类顺序解析[源码]”明确指向了一个关键且常被忽视的技术细节：CSS中针对`<a>`标签的四种伪类（pseudo-classes）的定义顺序问题。这四种伪类分别是：`:link`、`:visited`、`:hover` 和 `:active`。...
a标签的伪类也是鼠标按下的效果码
最新发布
07-07
<title>a标签的 :active 伪类</title> <style> a { display: inline-block; padding: 10px 20px; font-size: 18px; text-decoration: none; color: white; background-color: #007BFF; border-radius: 5px...
<a>链接四个伪类书写顺序的真正原因
前端向朔
10-26 3672
【前言】自我开始用a链接的四个伪类开始，我只记得说，就是这么规定的，最近在学习CSS基础，发现书写顺序的真正原因竟是因为。。。先来了解几个概念。特指度：就是用来衡量一个选择器的优先级的。比如：div——>1 .ab——>10 #nav——>100 div .ab——>11 #nav .ab div——>111针对同一元素，优先级最高的选择器定义的样式被应用。如果这优先级不清楚的可以阅读这篇文章：
a标签的css样式四个状态LVHA的设计
09-25
a标签有四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的），下面有个示例大家可以看看
a 标签的伪类的正确顺序，以及原因
weixin_33935777的博客
05-28 330
注意，a 标签的伪类是有顺序的，否则有可能样式不对；lvha，原因：浏览器的就近原则，举个例子：我定义的顺序是a:visited、a:hover、a:link，这时候就会发现，不管我有没有hover上去，样式都是link的样式的，这是因为鼠标经过的未访问链接同时拥有a:link、a:hover两种属性，在第一种情况下，a:link离它最近，所以它优先满足a:link，而放弃a:hover的重复定...
A标签的四个伪类（L V H A）排序上的讲究
weixin_30869099的博客
01-09 262
A标签的四个伪类： LINK:具有链接属性 VISITED:链接地址已被访问过 HOVER:鼠标悬停时的状态 ACTIVE:被用户激活（鼠标点击，但未释放） 为什么这么排列（L V H A）？ 1.从用户体验的角度 在用户使用超链接的时候，为了最佳的用户体验，要做到下面几点：第一：不管是否是被访问过的超链接，只要我鼠标移上的时候(:hover)都要有写变化...
a:link,a:visited,a:hover,a:active 分别是什么意思?
weixin_46100406的博客
04-07 2731
link:连接平常的状态 visited:连接被访问过之后 hover:鼠标放到连接上的时候 active:连接被按下的时候 正确顺序：“爱恨原则”（LoVe/HAte），即四种伪类的首字母:LVHA。再重复一遍正确的顺序：a:link、a:visited、a:hover、a:active . 因为当鼠标经过未访问的链接，会同时拥有a:link、a:hover两种属性，a:link离它最近，所...
HTML--a标签的4种状态(LVHA)
weixin_46858088的博客
12-08 312
a:link 未访问的链接 a:visited 已访问的链接 a:hover 鼠标位于链接上方 a:active 链接被点击时
a标签的四个伪类使用顺序
热门推荐
HTML5_styy的博客
11-24 1万+
a:link{color:#f30;} a:visited{color:#000;} a:hover{color:#fff;} a:active{color:#f99;}
前端第一阶段-13（伪类、伪元素）
Victory_bad的博客
08-05 343
伪类用来添加一些选择器的特殊效果⚠️a:hover 必须放在 a:link 和 a:visited之后⚠️a:active 必须在 a:hover 之后。 伪类 说明 :hover 鼠标移入 :active 鼠标按下到抬起 a:link 链接访问前 a:visited 链接访问后 伪元素 说明 ::before 在... 前面加 ::after 在... 后面加..................
LVHA爱恨原则
weixin_30575309的博客
09-09 180
关于link 和 visited是否访问过，讲得应该是对浏览器而言该网页之前是否访问过， 而不是只对单次生成页面而言 转载于:https://www.cnblogs.com/FlFtFw/p/9613208.html...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值