html中a标签点击状态失效(覆盖)——link,visited,hover,active的顺序

本文解析了HTML中<a>标签的四个CSS伪类状态:link、visited、hover、active,并通过实例展示了这些状态的正确应用顺序,避免样式冲突。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

html中,<a> 标签的点击事件有四个状态,分别是link、visited、hover、active,如果同时设置多个状态的显示且不按照一定状态的话,就会让一些效果被覆盖了。

下面放一段错误代码,先设置hover,再设置visited,会发现当鼠标移上去后a的颜色还是白色(#fff),而不是想要的#f0a986,即a的hover的样式被visited的覆盖了。

a:hover{
    color: #f0a986;
    text-decoration: none;
}

a:visited{
    color:#fff;
    text-decoration: none;
}

正确的顺序应该是:

link→visited→hover→active

a:link:未访问时的样式,一般省略成a
a:visited:已经访问后的样式
a:hover:鼠标移上去时的样式
a:active:鼠标按下时的样式



欢迎大家加入QQ群一起交流讨论, 「吟游」程序人生——YinyouPoet

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值