开篇
很早之前顺着W3C学,那会儿还不懂知识积累,只是喜欢啥学啥,现在有了博客,却发现很多积累的知识都忘掉了,所以再做一遍积累。
这篇是a标签的四种伪类的顺序,很常用。
代码实例
a标签伪类的作用:
“:link“: a标签还未被访问的状态;
“:visited“: a标签已被访问过的状态;
“:hover“: 鼠标悬停在a标签上的状态;
“:active“: a标签被鼠标按着时的状态;
<style type="text/css">
a:link {color: #000;} /* 未访问的链接 */
a:visited {color: #F00;} /* 已访问的链接 */
a:hover{color: #0F0;} /* 鼠标在链接上 */
a:active {color: #00F;} /* 正在跳转时。Tip:当你已经到了要链接的页面,然后再返回,原页面上的此链接仍是此颜色 */
</style>
取消下划线:
a{text-decoration: none}
顺序的形成原因
本质是“同等优先权的样式,写在后边的会覆盖前边”,a标签的伪类只不过是又结合了不同的动作顺序,动作的触发顺序决定了——伪类的顺序必须按lvha
来写。
下面结合这4个伪类简单说下:
因为前2者两种状态是 常态,而后2者是 即时状态,当即时状态触发时,要覆盖常态,所以2个即时状态要放在后边;
在常态下:如果a标签被访问过后,就要呈现被访问过的状态,所以visited 要放在link后边;
因为鼠标按下时,伴随着悬停的a标签上,所以要想active覆盖hover,就必须把active放后边。
参考资料:
a标签伪类的作用及书写顺序是什么 - 站长之家
a标签的link、visited、hover、active的顺序 - Ron Ngai