CSS3实例教程:hover、active和:focus伪选择器。

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伪选择器——网页教学网webjx.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>

CSS3实例教程:hover、active和:focus伪选择器。

相关推荐