Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 245|回复: 0

[默认分类] 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2018-7-10 10:49:42 | 显示全部楼层 |阅读模式

      


    摘自:
    http://blog.snsgou.com/post-2.html


      


      


    以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面。出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确。


      


    给出我试的顺序,可能会对大家有一些帮助:





      
      
      代码
      
       
       
        A:link
        {
       
    color
        :
         #000000
        ;
       
    TEXT-DECORATION
        :
         none

        }
       
    A:visited
        {
       
    COLOR
        :
         #000000
        ;
       
    TEXT-DECORATION
        :
         none

        }
       
    A:hover
        {
       
    COLOR
        :
         #ff7f24
        ;
       
    text-decoration
        :
         underline
        ;
       

        }
       
    A:active
        {
       
    COLOR
        :
         #ff7f24
        ;
          
    text-decoration
        :
         underline
        ;
       

        }
       

       
      

      


      


    今天看到一位匿名朋友的问题,又去查了一些资料,这个人讲的非常透彻:引自灵眸●第一炉沉香博客


      


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

    我想,原因就在于浏览器解释CSS时遵循的“就近原则”。



    举例来说:

    我想让未访问链接颜色为蓝色,活动链接为绿色,已访问链接为红色:


    第一种情况:我定义的顺序是a:visited、a:hover、a:link,这时会发现:把鼠标放到未访问过的蓝色链接上时,它并不变成绿色,只有放在已访问的红色链接上,链接才会变绿。
    第二种情况:我把CSS定义顺序调整为:a:link、a:visited、a:hover,这时,无论你鼠标经过的链接有没有被访问过,它都会变成绿色啦。



    这是因为,
    一个鼠标经过的未访问链接同时拥有a:link、a:hover两种属性,在第一种情况下,a:link离它最近,所以它优先满足a:link,而放弃a:hover的重复定义。

    在第二种情况,无论链接有没有被访问过,它首先要检查是否符合a:hover的标准(即是否有鼠标经过它),满足,则变成绿色,不满足,则继续向上查找,一直找到满足条件的定义为止。





    一句话:
    在CSS中,如果对于相同元素有针对不同条件的定义,宜将最一般的条件放在最上面,并依次向下,保证最下面的是最特殊的条件。

    这样,浏览器在显示元素时,才会从特殊到一般、逐级向上验证条件,才会使你的每一个CSS语句都起到效果。

    当然,如果故意打乱顺序,也会造成一些特殊的效果。比如,可以为链接制造出下划线颜色与文字颜色的差异。



    近日突然发现,原来这个CSS问题早已有高人提出啦。还是个老外呢。他给总结了一个便于记忆的“
    爱恨原则”(
    Lo
    Ve/
    H
    Ate),即四种伪类的首字母:LVHA。

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


      


      


      


      

    最后经验补充:

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

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







      ...-->
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-29 23:43 , Processed in 0.364683 second(s), 37 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表