a标签伪类link，hover，active，visited，focus区别

<div id="content">
        <h3><a class="a1" href="#">a标签伪类link，hover，active，visited，focus区别</a></h3>
</div>    

 

a.a1:link{        /*链接未被访问时的状态*/
  color: blue;
}
a.a1:visited{     /*链接访问后的状态*/
  color: green;  
}
a.a1:hover{       /*鼠标飘上去的状态*/
  color: red;
}
a.a1:focus{       /*鼠标点击后，刚松开的状态*/
 color: orange;   
}
a.a1:active{      /*点击中的状态，鼠标未松开时*/
  color: yellow;
}

 

a:link:链接未被访问时的状态，原始状态

未设置超链接则属性无效

a:visited:点击之后显示的颜色，链接被访问后呈现的颜色

visited针对的是url，如果两个a标签都指向一个链接，点击一个后另一个也有visited属性

聚焦后，列如，有一个空连接，点击后呈现focus（橘色），当鼠标聚焦其他内容，比如点击空白区域后，空连接文本就显示的是visited属性（绿色），或点击的是有效链接跳转后，返回当前页就是绿色

未设置超链接则无效

a:hover:鼠标飘上去的颜色

a:focus : 聚焦，鼠标点击后刚松开显示的属性

点击完，鼠标刚松开，如果未设置focus，鼠标刚松开后会先显示原始状态link（蓝色），之后显示visited属性绿色（不需要点击其他聚焦，因为当前div没有聚焦），再次点击后松开就不会显示蓝色了，因为此时的原始色已改为点击后的颜色绿色，所以鼠标松开后就会变回绿色，如果设置了hover，鼠标松开后，会先显示hover，然后显示visited颜色

如果未设置active,focus就等于点击中和点击后的状态

内容是纯文本则无效

a:active：点击中，显示的颜色，鼠标未松开时

标签伪类的顺序：

link-》visited -》hover -》focus -》active

按着上面的css，h3标签内显示的顺序应该是 :

link（蓝色）-》鼠标飘上去hover（红色）-》点击中active（黄色） -》鼠标是松开focus （橘色）-》聚焦其他内容，visited（绿色）