<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颜色
内容是纯文本则无效
a:active：点击中，显示的颜色，鼠标未松开时
标签伪类的顺序：
link-》visited -》hover -》focus -》active
按着上面的css，h3标签内显示的顺序应该是 :
link（蓝色）-》鼠标飘上去hover（红色）-》点击中active（黄色） -》鼠标是松开focus （橘色）-》聚焦其他内容，visited（绿色）
a标签伪类link，hover，active，visited，focus区别
原文：https://www.cnblogs.com/71yishen/p/13044961.html