开发学院网页设计 DivCss hover、active和:focus伪选择器阅读

hover、active和:focus伪选择器

　2012-07-21 10:01:52　来源：WEB开发网　　　

核心提示： CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器，hover、active和:focus伪选择器，这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效，主要用在文本框输入文字时使用；【注】下方案例运行效果，之所以点击后

CSS3的伪类选择器就是多，今天我们来学习新的伪类选择器——UL状态伪类选择器。这些选择器都有一个共同的特征名那就是定义的样式只有当元素处于某种状态下时才起作用，在默认状态下无效。

今天我们先来接触:hover、active和:focus这三种状态伪类选择器。

:hover选择器、:active选择器和:focus选择器
:hover选择器：当鼠标悬停在所指定的元素上时所使用的样式；
:active选择器：当所指定的元素处于激活状态（鼠标在元素上按下还没有松开）时所使用的样式；
:focus选择器：当元素获得光标焦点时使用的样式，主要用在文本框输入文字时使用；
【注】下方案例运行效果，之所以点击后立即变为绿色是因为active触发的同时focus也触发了，所以active定义的样式看似无效，大家可以先把focus定义的样式注释掉运行；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tech.cncms.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>