摘要:本篇教程介绍了HTML+CSS入门 CSS中a链接的4个伪类为何有顺序,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
本篇教程介绍了HTML+CSS入门 CSS中a链接的4个伪类为何有顺序,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。
<
在CSS中,a标签有4种伪类,分别为:
a:link, a:visited, a:hover, a:active
对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之外的效果。
大部分人,都会用自己的方式,对这个顺序死记硬背。 熟记顺序,无疑是写样式时最快捷的方法,牛人们的记忆方法也是五花八门。 我见过有酱婶的:lv的包包hao,这倒是实话。 比较奇葩的,我在baidu上输入lvha,竟然自动关联出鹿晗。 还有歪果仁们,则戏称LvHa为爱恨原则。 记是记住了,但是疑惑也就来了,我知道这顺序一定是有说法的,本着往祖坟上刨的原则,下面就来探究一下,到底为什么。
首先,我再把4个伪类的效果唠叨一遍:
a:link是a链接的默认样式,即a链接未被点击过时a标签内容在页面上呈现的视觉效果。a:visited是a链接被访问过后的样式,即a链接被点击后a标签内容在页面上呈现的视觉效果。a:hover是鼠标移动到a链接上面时的样式,即鼠标悬浮在a标签内容上方时,其在页面上呈现的视觉效果。a:active是鼠标点击a链接时的样式,即从鼠标按键按下到鼠标按键弹起的过程中,a标签内容在页面上呈现的视觉效果。
我们来分析一下,一个a链接要发生所有的样式,是怎样一个过程:
首次进入页面时,a链接未被点击过,应该呈现a:link的效果,
当鼠标移动到a链接上时,应该呈现a:hover的效果,
当鼠标点击a链接时,应该呈现a:active的效果,
最后,a链接应该呈现a:visited的效果。
如果,a:link写在a:hover之后,依据CSS层叠特性,a:link将覆盖a:hover样式,鼠标移动到a链接上时a:hover将不会生效,这不是我们预期的效果,所以a:link要写在a:hover前。
如果,a:link写在a:active之后,同理,a:link覆盖了a:active样式,鼠标点击a链接时,a:active将不会生效,所以,a:link要写在a:active前。
如果,a:hover写在a:active之后,那么,a:hover讲覆盖a:active样式,要想点击a链接,一定会先经过鼠标移动到a链接之上这个步骤,所以,当点击a链接时,a:active将不会生效,所以,a:hover要写在a:active前。
而a:visited,跟a:link类似,它发生在a:link之后,hover和a:active之前,它的位置,只能在第二位了。
以上便是我们分析出的lvha顺序的由来。
本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号