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

posted @ 2021-01-18 14:57  红羽毛学习站  阅读(609)  评论(0编辑  收藏  举报