CSS中定义a:link、a:visited、a:hover、a:active顺序

a :link、a:hover、a:visited这几个元素,定义CSS时候的顺序不同,也会直接导致链接显示的效果不同。

eg:
让未访问链接颜色为red,活动链接为yellow,已访问链接为green:

第一种情况:

CSS定义的顺序为a:visited、a:hover、a:link。

把鼠标放到未访问过的red链接上时,它并不变成yellow,只有放在已访问的green链接上,链接才会变yellow。

第二种情况:

CSS定义顺序为:a:link、a:visited、a:hover。
无论你鼠标经过的链接有没有被访问过,它都会变成yellow。
原因是,一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。
在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成yellow,不满足,则继续向上查找,一直找到满足条件的定义为止。

在CSS中,如果对于相同元素有针对不同条件的定义,要将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。
这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。
当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。

正确的顺序为:a:link、a:visited、a:hover、a:active .

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值