谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序

a链接的四种状态

伪类是CSS 用于向某些选择器添加特殊的效果。

a标签中有四个:link、visited、hover、active

(1)link

说明:设置a对象在未被访问前的样式表属性。

(2)visited

说明:设置a对象在其链接地址已被访问过时的样式表属性。

(3)hover

说明:设置对象在其鼠标悬停时的样式表属性。

(4)active

说明:设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。

定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。原因可能在于浏览器解释CSS时遵循的“就近原则”。正确的顺序:a:link、a:visited、a:hover、a:active

解释:

link:连接平常的状态
visited:连接被访问过之后
hover:鼠标放到连接上的时候
active:连接被按下的时候

再重复一遍正确的顺序:a:link、a:visited、a:hover、a:active .

最后经验补充:

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

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

所以说,a:hover定义一定要放在a:link、a:visited的后面!

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容