zoukankan      html  css  js  c++  java
  • a标签的伪类使用注意事项以及习惯用法

    a{}a:link{}的区别:

    • a{}定义的样式针对所有的超链接(包括锚点)
    • a:link{}定义的样式针对所有写了href属性的超链接(不包括锚点)

    超链接a标签在使用的时候,比较难。因为不仅仅要控制a这个盒子,也要控制它的伪类。

    我们一定要将a标签写在前面,将:link、:visited、:hover、:active这些伪类写在后面。

    上方代码中,我们发现,当我们在定义a:link和 a:visited这两个伪类的时候,如果它们的属性相同,我们其实可以写在一起,用逗号隔开就好,摘抄如下:

    		.nav ul li a{
    			display: block;
    			 120px;
    			height: 50px;
    		}
    		/*两个伪类的属性,可以用逗号隔开*/
    		.nav ul li a:link , .nav ul li a:visited{
    			text-decoration: none;
    			background-color: purple;
    			color:white;
    		}
    		.nav ul li a:hover{
    			background-color: orange;
    		}
    

    如上方代码所示,最标准的写法,就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中,发现不写link、visited也挺兼容。写法是:

    a:link、a:visited都是可以省略的,简写在a标签里面。也就是说,a标签涵盖了link、visited的状态(前提是都具有了相同的属性)。写法如下:

    		.nav ul li a{
    			display: block;
    			 120px;
    			height: 50px;
    			text-decoration: none;
    			background-color: purple;
    			color:white;
    		}
    		.nav ul li a:hover{
    			background-color: orange;
    		}
    
    

    当然了,在写a:linka:visited这两个伪类的时候,要么同时写,要么同时不写。如果只写a属性和a:link属性,不规范。

  • 相关阅读:
    Dockerfile-ADD命令-转载
    华为云上上传镜像到在线镜像仓库
    什么是4D(DRG、DLG、DOM、DEM)数据
    视频对接资料
    OpenLayer改变切片地图的样式-滤镜效果
    Docker-挂载宿主机目录到容器
    RTSP在线视频环境搭建2-海康摄像头
    配置自己风格的Clang-Format-Xcode
    GCDAsyncUdpSocket的使用
    react-native component function
  • 原文地址:https://www.cnblogs.com/hongyumao/p/14292749.html
Copyright © 2011-2022 走看看