冰冰的小屋

路漫漫其修远兮,吾将上下而求索

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


超链接标签的 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伪类的顺序:

L-V-H-A

即 love & hate;

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

例子:

 

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注