css3的那些高级选择器二

　　在上个星期我介绍了css3的属性选择器，伪类选择器和结构伪类选择器，今天楼主继续把其它的css3选择器说完。

　　在css3中，共有11中UI状态伪类选择器，分别是E:hover,E:active,E:focus,E:enabled,E:disabled,E:read-only,E:read-write,E:checked,E:default,E:indeterminate及E::selection我们来看下这11种选择器被浏览器的支持的情况

css3的那些高级选择器二

一，选择器E:hover,E:active,E:focus

E:hover选择器用来指定当鼠标指针移动到元素上面时元素所使用的样式,用法如下：

<元素>:hover {
    指定样式
}

对于E:hover大家都会想到a元素；不错E:hover在ie6下只支持a元素，到ie7后才支持其他的标签元素

所有的UI元素状态伪类选择器的使用方法均与此类似

E:active选择器用来指定元素被激活(鼠标在元素上面按下还未松开)时元素所使用的样式

E:focus选择器用来指定当元素获得焦点时所使用的样式

综合例子演示：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title> css属性选择器二 </title>
    <style type="text/css">
        8 {margin:0; padding:0;}
        table {width:500px; margin:0 auto; line-height:28px; border:1px solid #DDD; border-collapse:collapse; border-spacing:0;}
        table th {text-align:center; border:1px solid #DDD;}
        table td {text-align:left; padding-left:5px; border:1px solid #DDD;}
        input {width:280px; height:20px; color:#999;}
        
        input[name="uName"]:hover {
            background:yellow;
        }
        
        input[name="uName"]:focus {
            background:#FFF;
            color:blue;
        }
        
        input[name="uName"]:active {
            background:#FFF;
            color:red;
        }
        
    </style>
<body>
    <table>
        <tr>
            <td>姓名：</td>
            <td><input type="text" name="uName" value="琦恒" /></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pwd" /></td>
        </tr>
    </table>
</body>
</html>

View Code