UI元素狀態(tài)偽類選擇器
所謂的ui元素狀態(tài)偽類，就是主要針對(duì)表單元素的不同狀態(tài)進(jìn)行樣式控制的偽類選擇器。
表單元素的不同狀態(tài)例如有文字方塊的可用和不可用，複選框和單選按鈕的選取和沒(méi)有被選取等狀態(tài)。
在css 3 中共有11中UI偽類選擇器，分別是：?
E:hover;/*支持firefox、safari、Opera、ie8、chrome*/ E:active;/*支持firefox、safari、Opera、chrome 不支持ie8*/ E:focus; /*支持firefox、safari、Opera、ie8、chrome*/ E:enabled;/*支持firefox、safari、Opera、chrome 不支持ie8*/ E:disabled;/*支持firefox、safari、Opera、chrome 不支持ie8*/ E:read-only;/*支持firefox、Opera 不支持ie8、safari、chrome */ E:read-write/* 支持firefox、Opera 不支持ie8、safari、chrome*/ E:checked /*支持firefox、safari、Opera、chrome 不支持ie8*/ E::selection /* 支持firefox、safari、Opera、chrome 不支持ie8 */ E:default /*只支持firefox*/ E:indeterminate/*只支持Opera*/
逐一說(shuō)明：?
1.E:hover選擇器用來(lái)指定當(dāng)滑鼠指標(biāo)移動(dòng)到元素上面時(shí)，元素所使用的樣式。?
2.E:active選擇器用來(lái)指定元素被啟動(dòng)（滑鼠在元素上按下還沒(méi)有放開(kāi)時(shí)）時(shí)所使用的樣式。?
3.E:focus選擇器用來(lái)指定當(dāng)元素獲得焦點(diǎn)時(shí)所使用的樣式。主要是文字方塊控制獲得焦點(diǎn)病進(jìn)行文字輸入時(shí)使用。
4:E:enabled選擇器用來(lái)指定目前元素處?kù)犊捎脿顟B(tài)時(shí)的樣式?
5:E:disabled選擇器用來(lái)指定目前元素處?kù)恫豢捎脿顟B(tài)時(shí)的樣式?
6.E:read- only選擇器用來(lái)指定當(dāng)元素處?kù)段ㄗx狀態(tài)時(shí)的樣式，在ff下需要寫成-moz-read-only的形式?
7.E:read-write選擇器用來(lái)指定當(dāng)元素處?kù)斗俏ㄗx狀態(tài)時(shí)的樣式。在ff下需要寫成-moz-read-write的形式?
8.E:checked選擇器用來(lái)指定當(dāng)表單中的radio單選按鈕或checkbox複選框處?kù)哆x取狀態(tài)的時(shí)的樣式。在ff下需要寫成-moz-checked的形式?
9.E:default選擇器用來(lái)指定當(dāng)頁(yè)面開(kāi)啟時(shí)預(yù)設(shè)處?kù)哆x取狀態(tài)的單選按鈕或複選框的樣式。需要注意的是，即使使用者將預(yù)設(shè)設(shè)定為選取狀態(tài)的單選按鈕或複選框修改為非選取狀態(tài)，使用E:default選擇器設(shè)定的樣式依然有效。?
10.E:indeterminate選擇器用來(lái)指定當(dāng)頁(yè)面開(kāi)啟時(shí)，如果一組單選按鈕中任何一個(gè)單選按鈕都沒(méi)有設(shè)定為選取狀態(tài)時(shí)的整組的單選按鈕的樣式。如果使用者選取這組中的任何一個(gè)單選按鈕，那麼整組的單選按鈕的樣式就會(huì)取消。?
11.E::selection選擇器用來(lái)指定當(dāng)元素處?kù)哆x取狀態(tài)時(shí)的樣式。這裡要注意的是:在ff下使用時(shí)，需要寫成-moz-selection的形式。?
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
ul li{
list-style:none;
}
input[type='text']:disabled{
color:green;
}
</style>
</head>
<body>
<ul>
<li><input type="text" value="php中文網(wǎng)"/></li>
<li><input type="text" disabled value="php中文網(wǎng)"/></li>
</ul>
</body>
</html>
