CSS3学习系列之选择器（三）

E：enabled伪类选择器和E：disabled伪类选择器

E:enabled伪类选择器用来指定元素处于可用状态的样式。

E:disabled伪类选择器用来指定当元素处于不可用状态时的样式。

当一个表单中的元素经常在可用状态与不可用状态之间进行切换的时候，通常会将E:disabled伪类选择器与E:enabled伪类选择器结合使用，用E:disabled伪类选择器来设置该元素处于不可用状态时的样式，用E:enabled选择器来设置该元素处于可用状态的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E:disabled伪类选择器与E:enabled伪类选择器结合使用示例</title>
    <style>
        input[type="text"]:enabled {
            background-color: yellow;
        }

        input[type="text"]:disabled {
            background-color: purple;
        }
    </style>
    <script>
        function radio_onchange(){
            var radio=document.getElementById("radio1");
            var text=document.getElementById("text1");
            if(radio.checked){
                text.disabled="";
            }else{
                text.value="";
                text.disabled="disabled";
            }
        }
    </script>
</head>
<body>
<form>
   <input type="radio" id="radio1" name="radio" onchange="radio_onchange()"/>可用
    <input type="radio" id="radio2" name="radio" onchange="radio_onchange()"/>不可用
    <br/>
    <input type="text" id="text1" disabled/>
</form>
</body>
</html>

E:checked、E:default和E:indeterminate

E:checked伪类选择器用来指定当前表单中的radio单选框或checkbox复选框处于选取状态时的样式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E:checked伪类选择器使用示例</title>
    <style>
        input[type="checkbox"]:checked {
            outline: 2px solid blue;
        }

        input[type="checkbox"]:-moz-checked {
            outline:2px solid blue;
        }
    </style>
</head>
<body>
<form>
  兴趣：<input type="checkbox"/>阅读
    <input type="checkbox"/>旅游
    <input type="checkbox"/>看电影
    <input type="checkbox"/>上网
</form>
</body>

E:default选择器用来指定当前页面打开时默认处于选取状态的单选或复选框控件的样式。注意：即使用户将该单选框或复选框控件的选取状态设定为非选取状态，E:default选择器中指定的样式仍然有效。例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E:default选择器的使用示例</title>
    <style>
        input[type="checkbox"]:default {
            outline: 2px solid blue;
        }
    </style>
</head>
<body>
<form>
  兴趣：<input type="checkbox" checked/>阅读
    <input type="checkbox"/>旅游
    <input type="checkbox"/>看电影
    <input type="checkbox"/>上网
</form>
</body>
</html>

E:infeterminate伪类选择器用来指定当页面打开时，如果一组单选框中任何一个单选框都没有被设定为选取状态时整组单选框的样式，如果用户选取了其中任何一个单选框，则该样式被取消指定，到目前为止，只有Opera浏览器对这个选择器提供支持。

E::selection伪类选择器

E::selection伪类选择器用来指定当前元素处于选择状态时的样式。例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E::selection伪类选择器使用示例</title>
    <style>
        p::selection{
            background: red;
            color: #ffffff;
        }
        p::-moz-selection{
            background: red;
            color:#ffffff;
        }
        input[type="text"]::selection{
            background: gray;
            color:#ffffff;
        }
        input[type="text"]::-moz-selection{
            background: gray;
            color: #ffffff;
        }
        td::selection{
            background:green;
            color: #ffffff;
        }
        td::-moz-selection{
            background: green;
            color:#ffffff;
        }
    </style>
</head>
<body>
<p>这是一段测试文字</p>
<input type="text" value="这是一段测试文字。"/>
<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td>测试文字</td>
        <td>测试文字</td>
    </tr>
    <tr>
        <td>测试文字</td>
        <td>测试文字</td>
    </tr>
</table>
</body>
</html>

通用兄弟元素选择器

它用来指定位于同一个父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式，它的使用方法如下：

<子元素>-<子元素之后的同级兄弟元素>{

//指定样式

}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用兄弟元素选择器E-F</title>
</head>
<body>
<div style="width: 733px;border: 1px solid #666;padding:5px">
    <div>
        <p>p元素为div元素的子元素</p>
        <p>p元素为div元素的子元素</p>
    </div>
    <hr/>
    <p>p元素为div元素的兄弟元素</p>
    <p>p元素为div元素的兄弟元素</p>
    <hr/>
    <p>p元素为div元素的兄弟元素</p>
    <hr/>
    <div>p元素为div元素的子元素</div>
    <hr/>
    <p>p元素为div元素的兄弟元素</p>
</div>
</body>
</html>