特征：指定的样式只有在某种状态下才起作用
共11种分别为：E:hover、E:active、E:focus、E:enable、E:disable、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E:selection
各UI元素状态伪类选择器受浏览器的支持情况
| 选择器 | Firefox | Safari | Opera | IE8 | Chrome |
|---|---|---|---|---|---|
| E:hover | √ | √ | √ | √ | √ |
| E:active | √ | √ | √ | x | √ |
| E:focus | √ | √ | √ | √ | √ |
| E:enable | √ | √ | √ | x | √ |
| E:disable | √ | √ | √ | x | √ |
| E:read-only | √ | x | √ | x | x |
| E:read-write | √ | x | √ | x | x |
| E:checked | √ | √ | √ | x | √ |
| E:default | √ | x | x | x | x |
| E:indeterminate | √ | √ | x | √ | √ |
| E:selection | √ | √ | √ | x | √ |
1. E:hover、E:active、E:focus
下图分别为：鼠标经过、鼠标点击（但未松开）、鼠标获得焦点（点击松开）
html：
<p><label for="txt">姓名：</label><input type="text" id="txt"></p>
<p><label for="address">地址：</label><input type="text" id="address"></p>css：
<style>
input[type="text"]:hover { /*鼠标经过（悬停）*/
background-color: pink;
}
input[type="text"]:focus { /*鼠标获得焦点（点击）并进行文字输入时*/
background-color: #ccc;
}
input[type="text"]:active { /*鼠标按下（按下还未松开）*/
background-color: yellow;
}
</style>解析：顺序不要写反，否则失效；:hover、:focus、:active
2.E:enable、E:disable
点击可用按钮时，文本框背景色为pink；点击不可用按钮时，文本框背景色为灰色；如图：
html：
<label for="radio1">可用</label><input type="radio" name="radio" id="radio1" onchange="radio_onchange()">
<label for="radio2">不可用</label><input type="radio" name="radio" id="radio2" onchange="radio_onchange()"><br>
<input type="text" id="txt">css：
input[type="text"]:enabled {
background-color: pink;
}
input[type="text"]:disabled {
background-color: #ccc;
}js：
<script>
function radio_onchange(){
var radio = document.getElementById('radio1');//获得可用单选按钮的id
var txt = document.getElementById('txt');//获得文本框id
if(radio.checked){
txt.disabled = "";//选中时文本框为可用
}else{
txt.disabled = "disabled";//否则文本框为不可用
}
}
</script>3.E:checked、E:default、E:indeterminate
E:checked是用来制指定当表单中的radio单选框、checkbox复选框处于选取状态时的样式。
复选框选中时的样式 如下：
html：
<label for="apple">苹果</label><input type="checkbox" id="apple">
<label for="banana">香蕉</label><input type="checkbox" id="banana">
<label for="chengzi">橙子</label><input type="checkbox" id="chengzi">
<label for="boluo">菠萝</label><input type="checkbox" id="boluo">css：
<style>
input[type="checkbox"]:checked {
outline: 2px solid red;
}
input[type="checkbox"]:-moz-checked { /*兼容火狐浏览器*/
outline: 2px solid red;
}
</style>E:default选择器Chrome不支持、只有火狐支持
E:indeterminate选择器只有Opera支持
4.E:selection伪类选择器用来指定当元素处于选中状态时的样式
html：
<body>
<input type="text" value="这是一个测试表单">
<p>这是一段测试文字</p>
<table border="1" cellpading="0" cellspacing="0">
<tr>
<td>单元格A</td>
<td>单元格B</td>
<td>单元格C</td>
</tr>
<tr>
<td>单元格D</td>
<td>单元格E</td>
<td>单元格F</td>
</tr>
</table>
</body>css：
<style>
input[type="text"]::selection { /*IE8不兼容*/
color: red;
background-color: #ccc;
}
p::selection {
background-color: pink;
color: red;
}
p::-moz-selection { /*兼容火狐浏览器*/
background-color: pink;
color: red;
}
td::selection {
background-color: pink;
color: red;
}
</style>