理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序
理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序
在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顺序的由来。
笔者希望通过这简短的文章,能让一些死记硬背的前端er理解,为什么要按照lvha顺序来写样式。因为在笔者的认知里,理解是最好的记忆方法。
转自http://www.cnblogs.com/KilerMino/archive/2016/11/21/6086940.html
理解是最好的记忆方法 之 CSS中a链接的④个伪类为何有顺序的更多相关文章
- 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序
在CSS中,a标签有4种伪类,分别为: a:link, a:visited, a:hover, a:active 对其稍有了解的前端er都知道,4个伪类是有固定顺序的(LVHA),否则很容易出现预期之 ...
- (4)《Head First HTML与CSS》学习笔记---文本的CSS规则和盒模型;div与span;<a>元素的链接色;伪类
1.每个font-family包含一组共同特征的字体.共五个字体系列: sans-serif----这个系列包括了没有衬线的字体,与serif相比,通常认为这个系列更容易在计算机上识读. serif- ...
- css中class后面跟两个类,这两个类用空格隔开
css中class后面跟两个类,这两个类用空格隔开,那么这两个类对这个元素都起作用,如果产生冲突,那么后面的类将替代前面的类.
- 谈谈一些有趣的CSS题目(十)-- 结构性伪类选择器
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- CSS魔法堂:稍稍深入伪类选择器
前言 过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类 伪类选择器实质上 ...
- CSS快速入门-鼠标悬浮(hover伪类)
一.概述 hover伪类:在鼠标移到元素上时向此元素添加特殊的样式.比较普通的就是一个url,当你鼠标放上去后,会变颜色. 在现实的应用场景也非常之多.最常见的是网站的悬浮导航,当鼠标放到导航条上时, ...
- CSS链接四种状态注意顺序、UI伪类选择器的顺序
css定义超链接是要有先后顺序的.否则,可能会出现某个或某几个样式不起作用的bug.例如:visited与hover顺序颠倒了,则不能显示hover和active的样式了. 正确的顺序: a:link ...
- CSS中的before和:after伪元素深入理解
1.定义: “伪元素”,顾名思义.就是它创建了一个虚假的元素,并且将其虚假的元素插入到目标元素的内容之前或之后. 2:特点: a.它在实际文档中不改变什么,但是对用户可见,可以通过css控制,源码中看 ...
随机推荐
- 第一次点击Div1显示Div2,再次点击Div1的时候又隐藏Div2
要使用Jquery来实现,记得引用Jquery库哦,代码如下: $(document).ready(function(){ $("#ck1").click(function(){ ...
- supersr--去除tableViewHeader的粘性
这段代码能去除tableViewHeader的粘性 const static NSInteger kSectionHeaderHeight = 30; - (void)scrollViewDidScr ...
- October 8th 2016 Week 41st Saturday
When ambition ends, happiness begins. 野心消亡之日,正是快乐破茧之时. If I don't have the wish to be a useful man, ...
- NYOJ题目1051simone牌文本编辑器
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsgAAAKFCAIAAABeD4iTAAAgAElEQVR4nO3dO3LjOtOA4X8TzrUQx1
- execl一个工作薄中有几个个工作表,将这几个个工作表分别保存到不同execl文件中
用宏运行: Sub QEJebel() Dim sh As Worksheet Dim Pa As String Pa = ThisWorkbook.Path For Each ...
- Java集合源码学习(三)LinkedList分析
前面学习了ArrayList的源码,数组是顺序存储结构,存储区间是连续的,占用内存严重,故空间复杂度很大.但数组的二分查找时间复杂度小,为O(1),数组的特点是寻址容易,插入和删除困难.今天学习另外的 ...
- 终于看完<LEARNING SQL>第二版,立此存照
- 攻城狮在路上(肆)How tomcat works(二) 一个简单的servlet容器
该节在上一节的基础上增加了所谓对静态资源和动态资源访问的不同控制流程.示例里面采用的是对路径“/servlet/”进行了特殊处理. 一. 主要还是从HttpServer1中的main方法开始,先解析出 ...
- font-face使用备忘
@font-face { font-family: 'SingleMalta'; src: url('./font/SingleMalta.ttf'); } @font-face { font-fam ...
- spring 集成 log4j 配置
在web.xml中增加如下代码: <context-param> <param-name>log4jConfigLocation</param-name> < ...