伪类的使用小经验，顺序的重要性。

运行下面代码：

    
    
    
 a:link{text-decoration:none ; color:black ;}
 a:visited {text-decoration:none ; color:blue  ;}
 a:hover {text-decoration:underline ; color:red ;}
 a:active {text-decoration:none ; color:yellow ;}

 .input1{width:200px;height:40px;border:2px #000 solid;outline: none;}
 .input1:focus{border:2px green solid;}
 .input1:hover{border:2px red solid;}

 .input2{width:200px;height:40px;border:2px #000 solid;outline: none;}
 .input2:hover{border:2px red solid;}
 .input2:focus{border:2px green solid;}
    


伪类的顺序是非常重要的：

这是一个超链接


a:link{text-decoration:none ; color:black;}//链接

a:visited {text-decoration:none ; color:blue;}//已访问过的链接

a:hover {text-decoration:underline ; color:red;}//鼠标停在上方时

a:active {text-decoration:none ; color:yellow;}//按下鼠标时


注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LOVE/HATE”。

表单：
注意下面两个比较下面两个例子，伪类顺序不同，效果的略微差异。
1.比较下面两个框，鼠标悬浮在框上并点击时的效果差异
2.比较下面两个框，点击输入框后，鼠标悬浮在框上时的效果差异