CSS中超链接伪类link,visited,hover,active的顺序分析

出处:[[子匠_Zijor](http://www.dengzhr.com/)](http://www.dengzhr.com/frontend/css/344)

超链接标签的CSS伪类包括link,visited,hover,active。

1. a伪类解释:

link:设置a对象在未被访问前的CSS样式;

visited:设置a对象在其链接地址已被访问过时的CSS样式;

hover:设置对象在其鼠标悬停时的CSS样式;

active:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的CSS样式;

2. a伪类的顺序研究

鼠标经过的“未访问链接”同时拥有a:link、a:hover两种属性,后面的属性会覆盖前面的属性定义;

鼠标经过的“已访问链接”同时拥有a:visited、a:hover两种属性,后面的属性会覆盖前面的属性定义;

a:active是鼠标点击与释放之间发生的事件,并拥有鼠标悬停a:hover属性;

由于伪类的选择器优先级一致,后面的a链接样式会覆盖前面的。

所以说,
a:hover定义一定要放在a:link、a:visited的后面,才能在鼠标悬停时,a:hover样式不被a:link和a:visited样式覆盖;

a:visited一定要放在a:link的后面,因为这样能保证访问过的链接具有a:visited样式,并能覆盖a:link默认样式;

a:active一定要放在a:hover后面。假如a:active放在a:hover前面,由于a:active拥有鼠标悬停a:hover属性,当鼠标按下时,首先会触发a:hover事件,然后触发a:active,但是a:ctive已被a:hover的样式所覆盖,因此无法看到a:active的样式。所以,a:active一定要放在a:hover后面。

综上所述,a伪类的顺序为:a:link > a:visited > a:hover > a:active。

a伪类的顺序为:a:link > a:visited > a:hover > a:active

也有人这么记a伪类的顺序:

L-V-H-A

即love & hate;

其实理解了原理,便不难记忆了。归根到底,是触发事件的先后问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容