刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗
2017-03-15 12:37
267 查看
刨根问底,你知道:hover等4个伪类为什么要按顺序排列吗
引言
:link,:visited,:hover,:active这4个伪类大家都不陌生,4个伪类要按照LvHa这个爱恨原则来排(外国友人起的记忆方法),不然有些效果会出问题。
但是你们都想过这几个属性为什么要按顺序排吗?
:link
和:hover
当鼠标移动到a标签上时,会触发a标签上的:hover效果,但同时,此时的
:link效果仍然存在于a标签上,既然两个效果都在a标签上起作用,那么根据css的就近原则,写在后面的css样式就覆盖了前面的效果,所以
<style> #b1:hover{ color: red; } #b1:link{ color: green; } </style> <a href="#" id="b1">点击我</a>
效果:
点击我
可以看到,由于此时link位于hover之后,所以当我们鼠标移上a标签时,发现hover效果被覆盖了,并没有变成红色,如果我们把顺序换过来,那么就会看到我们预想中的效果了
<style> #b2:link{ color: green; } #b2:hover{ color: red; } </style> <a href="#" id="b2">点击我</a>
效果:
点击我
此时,hover效果起作用了,所以我们可以得出结论一:hover要位于link之后
:link
、:hover
和:active
还是原本的思路分析,当鼠标点击时,此时:link、
:hover和
:active都在a标签上产生效果,所以还是根据就近原则,上代码
<style> #b3:hover{ color: red; } #b3:active{ color: blue; } #b3:link{ color: green; } </style> <a href="#" id="b3">点击我</a>
点击我
由于
:link放在最后面,所以不管是
:hover还是
:active的效果都被
:link覆盖了,所以此时无论鼠标以上还是点击我们都无法看到效果
<style> #b4:active{ color: blue; } #b4:link{ color: green; } #b4:hover{ color: red; } </style> <a href="#" id="b4">点击我</a>
点击我
把
:hover放到了最后,此时我们可以看到,鼠标移上
:hover产生了效果,同时点击时仍然无法看到
:active的效果,因为此时的
:active仍被
:hover覆盖了
正确的代码
<style> #b5:link{ color: green; } #b5:hover{ color: red; } #b5:active{ color: blue; } </style> <a href="#" id="b5">点击我</a>
点击我
至此,我们终于看到了想要的效果,同时也得出第二个结论
hover必须位于link之后,同时active必须位于hover和link之后
所以目前我们的顺序就是
link/hover/active
visited
那么visited应该放哪里呢?我们先试着把它放到最后<style> #b6:link{ color: green; } #b6:hover{ color: red; } #b6:active{ color: blue; } #b6:visited{ color: yellow; } </style> <a href="#1" id="b6">点击我</a>
点击我
鼠标移上,点击,乍一看好像没问题呀,所有的效果都正确的产生了。但是,当我们点击完了第一次a标签,再次进行点击的时候,发现
:hover和
:active都不起效果了,原来是因为此时
:visited起了作用,同时也由于
:visited写在最后,所以第二次点击的时候覆盖了之前的效果
最终的代码
<style> #b7:link{ color: green; } #b7:visited{ color: yellow; } #b7:hover{ color: red; } #b7:active{ color: blue; } </style> <a href="#2" id="b7">点击我</a>
点击我
我们改了一下位置,把
:visited放到了
:link之后,这时,无论是第一次点击,还是第二次点击,
:visited的效果都正确的产生了,同时又没有覆盖
:hover和
:active的效果,而最终的这个顺序,也正是我们说的
LvHa原则
看完此文,希望大家能够对这4个伪类有更深刻的认识,同时也能理解它们排列的顺序,其实如果理解了这几个伪类为什么这样排之后,就不再需要借助
LoHa这样的窍门来记忆了,理解才是最好的记忆方法。
相关文章推荐
- 你知道hover、active这四个伪类为什么要按顺序写吗
- <a>标签伪类书写顺序为什么是lvha
- 理解是最好的记忆方法 之 CSS中a链接的4个伪类为何有顺序
- a标签伪类排列的顺序
- a:link,a:visited,a:hover,a:active,伪类的顺序
- IE中伪类:hover的使用及BUG
- SELECT语句逻辑执行顺序 你知道吗?
- 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG
- a:link,a:visited,a:hover,a:active的使用和(CSS定义的)顺序
- 4个你需要知道的 Asset Catalog 的秘密
- 今天无意中发现JavaBean类基本都要求实现了Serializable接口,以前只是知道序列化以后,可以通过io流的方式将对象序列化和反序列化,进行存取,但不知道为什么需要序列化,今天总结一下
- RecyclerView将获取的带有时间的数据按时间先后顺序排列
- 【转】知道老子工作为什么累吧!! (从一同事的空间里转来的)
- 伪类选择器hover应用
- 用数组输出一段字符,并将其按照由大到小的顺序排列出来
- CSS :hover 伪类
- 输入一个字符串,按字典序打印出该字符串中字符的所有排列。例如输入字符串abc,则打印出由字符a,b,c所能排列出来的所有字符串abc,acb,bac,bca,cab和cba。 结果请按字母顺序输出。
- 汇编语言: .根据《中华人民共和国国家标准GB 11643-1999》中有关公民身份号码的规定,公民 身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成。排列顺序从左至右依 次为:六位数字地
- jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
- IE6中a:hover的CSS伪类无效