• 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的后面

  • 相关阅读:
    关于Mysql几周的整理文档
    压力开关
    【团队】汇总
    2017级面向对象程序设计——团队作业1
    东风吹十里,风华一笔得。
    【团队】实验品
    【2017级面向对象程序设计】作业四
    【C#】C#学习笔记_1
    【2017级面向对象程序设计】作业三
    【2017级面向对象程序设计】作业二
  • 原文地址:https://www.cnblogs.com/zhaojing-0504/p/5912985.html
Copyright © 2020-2023  润新知