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(绿色)

上一篇:Navicat premium如何使用Oracle的OCI


下一篇:.NET Core常用配置文件示例