运行下面代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
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;}
</style>
</head>
<body>
<p>伪类的顺序是非常重要的：</p>
<a href="#">这是一个超链接</a><br/>
<span>
a:link{text-decoration:none ; color:black;}//链接<br/>
a:visited {text-decoration:none ; color:blue;}//已访问过的链接<br/>
a:hover {text-decoration:underline ; color:red;}//鼠标停在上方时<br/>
a:active {text-decoration:none ; color:yellow;}//按下鼠标时<br/>
</span>
<p>注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“<b>L</b>O<b>V</b>E/<b>HA</b>TE”。</p>
<p>表单：</p>
<p>注意下面两个比较下面两个例子，伪类顺序不同，效果的略微差异。</p>
<p>1.比较下面两个框，鼠标悬浮在框上并点击时的效果差异</p>
<p>2.比较下面两个框，点击输入框后，鼠标悬浮在框上时的效果差异</p>
<p><input class="input1" type="text"/></p>
<p><input class="input2" type="text"/></p>
</body>
</html>
随时随地看视频
