Part I 這種選擇器的共同特征：
指定的樣式只有當(dāng)元素處于某種狀態(tài)時才起作用际乘，在默認(rèn)狀態(tài)下不起作用
CSS3中共有多種UI元素狀態(tài)偽類選擇器：
E:hover | E:active | E:focus | E:enable | E:disable
E:read-only | E:read-write | E:checked | E:default
E:indeterminate | E::selection | E:valid | E:invalid
E:required | E:optional | E:in-range
Part II 使用方法：（見例）
<style>
input[type="text"]:hover{樣式;} //鼠標(biāo)指針移動到某個文本框控件上的樣式
input[type="text"]:focus{樣式;} //文本框控件被激活時的樣式
input[type="text"]:active{樣式;} //文本框控件獲得光標(biāo)焦點后的樣式
</style>
Part III 詳細說明：
E:hover 鼠標(biāo)指針移動到某個文本框控件上的樣式坡倔；
E:active 元素被激活(鼠標(biāo)在元素上按下還沒有松開)時使用的樣式；
E:focus 元素獲得光標(biāo)焦點時使用的樣式脖含，主要是在文本框控件獲得焦點并進行文字輸入的時候使用罪塔；
E:enable 指定當(dāng)元素處于可用狀態(tài)時的樣式；
E:disable 指定當(dāng)元素處于不可用狀態(tài)時的樣式养葵；
E:read-only 指定當(dāng)元素處于只讀狀態(tài)時的樣式垢袱；
E:read-write 指定當(dāng)元素處于非只讀狀態(tài)時的樣式；
注：在FF下要寫成 -moz-read-only 或者 -moz-read-write
例：<style>
input[type="text"]:read-only{...}
input[type="text"]:read-write{...}
input[type="text"]:-moz-read-only{...} //針對FF而寫
input[type="text"]:-moz-read-write{...} //針對FF而寫
</style>
8.E:checked 指定當(dāng)表單中的radio單選框或checkbox復(fù)選框處于選取狀態(tài)時的樣子(FF中要寫成：-moz-checked)港柜；
9.E:default 指定當(dāng)頁面打開時默認(rèn)處于選區(qū)狀態(tài)的radio或checkbox控件的樣式请契；
10.E:indeterminate 指定當(dāng)頁面打開時咳榜，如果一組單選框中任何一個單選框都沒有被設(shè)定為選取狀態(tài)時整組單選框的樣式，如果用戶選取了一個單選框爽锥，則該樣式被取消
11.E::selection 指定當(dāng)元素處于選中狀態(tài)時的樣式涌韩；
12.E:valid偽類選擇器用來指定，當(dāng)元素內(nèi)容通過HTML 5通過使用元素的諸如required氯夷、pattern等屬性所指定的檢查或元素內(nèi)容符合元素的規(guī)定格式（例如通過使用type屬性值為Email的input元素來限定元素內(nèi)容必須為有效的Email格式）時的樣式臣樱。
13.E:invalid偽類選擇器用來指定，當(dāng)元素內(nèi)容不能通過HTML 5通過使用元素的諸如required腮考、pattern等屬性所指定的檢查或元素內(nèi)容不符合元素的規(guī)定格式（例如通過使用type屬性值為Email的input元素來限定元素內(nèi)容必須為有效的Email格式）時的樣式雇毫。
代碼清單19-25為一個E:invalid偽類選擇器與E:valid偽類選擇器的使用示例。示例頁面中具有一個使用了required屬性的input元素踩蔚，當(dāng)元素中沒有被填入內(nèi)容時元素背景色為紅色棚放，當(dāng)元素中填入內(nèi)容后元素背景色變?yōu)榘咨?/p>
<pre>
代碼清單19-25 E:invalid偽類選擇器與E:valid偽類選擇器的使用示例
<!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> E:invalid偽類選擇器與E:valid偽類選擇器結(jié)合使用示例
</title>
<style type="text/css">
input[type="text"]:invalid{
background-color: red;
}
input[type="text"]:valid{
background-color: white;
}
</style>
</head>
<body>
<form>
<p>請輸入任意文字：<input type="text" required/>
</p>
</form>
</body>
</html>
</pre>
14.E:required偽類選擇器用來指定允許使用required屬性，且已經(jīng)指定了required屬性的input元素馅闽、select元素以及textarea元素的樣式飘蚯。
15.E:optional偽類選擇器用來指定允許使用required屬性，且未指定required屬性的input元素福也、select元素以及textarea元素的樣式局骤。
代碼清單19-26為一個E:required偽類選擇器與E:optional偽類選擇器的使用示例。示例頁面中具有兩個分別用于輸入姓名與住址的文本框暴凑，并且對用于輸入姓名的文本框指定了required屬性峦甩，不對用于輸入住址的文本框指定required屬性。同時通過E:required偽類選擇器指定用于輸入姓名的文本框邊框為紅色现喳，寬度為3px,通過E:optional偽類選擇器指定用于輸入住址的文本框邊框為黑色穴店，寬度為1px。
<pre>
代碼清單19-26 E:required偽類選擇器與E:optional偽類選擇器的使用示例
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>E:required偽類選擇器與E:optional偽類選擇器結(jié)合使用示例</title>
<styletype="text/css">
input[type="text"]:required{
border-color:red;
border-width:3px;
}
input[type="text"]:optional{
border-color:black;
border-width:1px;
}
</style>
</head>
<body>
<form>
姓名：<inputtype="text"requiredplaceholder="必須輸入姓名"/>
住址：<inputtype="text"/>
</form>
</body>
</html>
</pre>
16.E:in-range選擇器用于標(biāo)簽的值在指定區(qū)間值時顯示的樣式拿穴。
以上大部分引用
http://www.cnblogs.com/ccqqccqqqq/archive/2012/02/27/2370194.html
