首页手记伪类的使用小经验，顺序的重要性。

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

标签：

Html/CSS Html5 CSS3

运行下面代码：

<!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>

点击查看更多内容