CSS3实例教程:hover、active和:focus伪选择器
日期：2013-11-18 浏览次数：21048 次
CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL形状伪类选择器。这些选择器都有一个共同的特征名那就是定义的款式只要当元素处于某种形状下时才起作用，在默认形状下无效。
今天我们先来接触:hover、active和:focus这三种形状伪类选择器。
:hover选择器、:active选择器和:focus选择器
:hover选择器：当鼠标悬停在所指定的元素上时所使用的款式；
:active选择器：当所指定的元素处于激活形状（鼠标在元素上按下还没有松开）时所使用的款式；
:focus选择器：当元素获得光标焦点时使用的款式，次要用在文本框输入文字时使用；
【注】下方案例运转效果，之所以点击后立即变为绿色是由于active触发的同时focus也触发了，所以active定义的款式看似无效，大家可以先把focus定义的款式注释掉运转；
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>CSS3实例教程:hover、active和:focus伪选择器——爱易网任务室Aiyiweb.Com</title>
<style type="text/css">
*{margin:0; padding:0;}
body{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
ul{margin:50px auto; width:260px; height:100px; list-style:none;}
ul li{margin-bottom:10px; overflow:hidden;}
label,input{display:inline; float:left;}
label{padding-right:8px; width:50px; height:27px; line-height:27px; text-align:right;}
input{width:200px; height:25px; border:1px #eee solid; border-top:1px #d1d1d1 solid; outline:none;}
input:hover{background:#eff7ff;}
input:active{background:#ffd;}
input:focus{background:#f2fddb;}
</style>
</head>
<body>
<ul>
<li>
<label for="userName">姓名:</label>
<input id="userName" type="text"/>
</li>
<li>
<label for="userPwd">密码:</label>
<input id="userPwd" type="password"/>
</li>
</ul>
</body>
</html>
