zoukankan      html  css  js  c++  java
  • 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的后面

  • 相关阅读:
    x-www-form-urlencoded与multipart/form-data区别
    objc_msgSend method_getTypeEncoding 与 @encode
    历史文件备份,原文件已损失
    和安全有关的那些事(非对称加密、数字摘要、数字签名、数字证书、SSL、HTTPS及其他)
    HTTP权威指南 目录
    Makefile 与tab
    NSString+URLParser NSScanner
    (转)虚拟文件系统(VFS)浅析
    Linux套接字与虚拟文件系统(1):初始化和创建
    linux内核中的文件描述符(二)--socket和文件描述符
  • 原文地址:https://www.cnblogs.com/zhaojing-0504/p/5912985.html
Copyright © 2011-2022 走看看