CSS 伪类

链接 a 有四种状态：激活状态、已访问状态、未访问状态、鼠标悬浮停状态

　一、链接使用伪类

　　格式：标签:伪类

a:link{ color:blue; }
a:visited{ color:gray; }
a:hover{ color:green; }
a:active{ color:orange; }

二、使用 class 属性进行标识

a.one:link{ color:blue; }
a.one:visited{ color:gray; }
a.one:hover{ color:green; }
a.one:active{ color:orange; }

a.two:link{ color:green; }
a.two:visited{ color:red; }
a.two:hover{ color:blue; }
a.two:active{ color:orange; }

<a href="https://www.baidu.com" target="_blank" class="one">百度</a>
<a href="https://cn.bing.com/" target="_blank" class="two">bing</a>

三、其他元素使用 hover 、active 伪类

　　其他标签例如 p、div、h1 都可以使用 hover 和 active 标签

p:hover{ color:green; }
p:active{ color:orange; }

div:hover{ color:blue; }
div:active{ color:gray; }

<p>CSS p标签</p>
<div>CSS div标签</div>

　　但是需要考虑浏览器版本的兼容问题，

　　 IE6 及更早版本，支持 <a> 元素的 4 种状态，但是不支持其他元素的 hover 和 active 。

四、伪类的顺序问题

　　LInk > Visited > Hover > Active 

　　1. a:hover 必须置于 a:link 和 a:visited 之后，才有效 

　　2. a:active 必须置于 a:hover 之后，才有效

a:active{ color:orange; }        
a:hover{ color:green; }

a:link{ color:blue; }
a:visited{ color:gray; }

　　上述顺序，伪类将不会有效

五、伪类名称对大小写不敏感

a:Link{ color:blue; }

转载于:https://www.cnblogs.com/lyw-hunnu/p/pseudoclass.html