所謂的ui元素狀態偽類,就是主要針對表單元素的不同狀態進行樣式控制的偽類選擇器。
表單元素的不同狀態例如有文字方塊的可用和不可用,複選框和單選按鈕的選取和沒有被選取等狀態。
在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*/
逐一說明:
1.E:hover選擇器用來指定當滑鼠指標移動到元素上面時,元素所使用的樣式。
2.E:active選擇器用來指定元素被啟動(滑鼠在元素上按下還沒有放開時)時所使用的樣式。
3.E:focus選擇器用來指定當元素獲得焦點時所使用的樣式。主要是文字方塊控制獲得焦點病進行文字輸入時使用。
4:E:enabled選擇器用來指定目前元素處於可用狀態時的樣式
5:E:disabled選擇器用來指定目前元素處於不可用狀態時的樣式
6.E:read- only選擇器用來指定當元素處於唯讀狀態時的樣式,在ff下需要寫成-moz-read-only的形式
7.E:read-write選擇器用來指定當元素處於非唯讀狀態時的樣式。在ff下需要寫成-moz-read-write的形式
8.E:checked選擇器用來指定當表單中的radio單選按鈕或checkbox複選框處於選取狀態的時的樣式。在ff下需要寫成-moz-checked的形式
9.E:default選擇器用來指定當頁面開啟時預設處於選取狀態的單選按鈕或複選框的樣式。需要注意的是,即使使用者將預設設定為選取狀態的單選按鈕或複選框修改為非選取狀態,使用E:default選擇器設定的樣式依然有效。
10.E:indeterminate選擇器用來指定當頁面開啟時,如果一組單選按鈕中任何一個單選按鈕都沒有設定為選取狀態時的整組的單選按鈕的樣式。如果使用者選取這組中的任何一個單選按鈕,那麼整組的單選按鈕的樣式就會取消。
11.E::selection選擇器用來指定當元素處於選取狀態時的樣式。這裡要注意的是:在ff下使用時,需要寫成-moz-selection的形式。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.php.cn/" /> <title>php中文网</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中文网"/></li> <li><input type="text" disabled value="php中文网"/></li> </ul> </body> </html>