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属性,不规范。

  • 相关阅读:
    小米路由研究之中的一个加入菜单
    【Struts2学习笔记(9)】单文件上传和多文件上传
    isPostback 的原理及作用(很easy)
    1-2Html与CSS的关系
    【HTML5】实现QQ聊天气泡效果
    杭电1166敌兵布阵 (用的树状数组)
    安卓市场---框架搭建4
    qcow2 raw vhd 虚拟磁盘转换
    softlayer virtual machine vhd磁盘镜像导入shell脚本
    Openstack no valid hot
  • 原文地址:https://www.cnblogs.com/hongyumao/p/14292749.html
Copyright © 2011-2022 走看看