亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

UI元素狀態(tài)偽類選擇器

所謂的ui元素狀態(tài)偽類,就是主要針對表單元素的不同狀態(tài)進行樣式控制的偽類選擇器。
表單元素的不同狀態(tà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*/

逐個說明: 

1.E:hover選擇器用來指定當鼠標指針移動到元素上面時,元素所使用的樣式。 
2.E:active選擇器用來指定元素被激活(鼠標在元素上按下還沒有松開時)時使用的的樣式。 
3.E:focus選擇器用來指定當元素獲得焦點時使用的樣式。主要是文本框控件獲得焦點病進行文字輸入時使用。 
4:E:enabled選擇器用來指定當前元素處于可用狀態(tài)時的樣式 
5:E:disabled選擇器用來指定當前元素處于不可用狀態(tài)時的樣式 
6.E:read-only選擇器用來指定當元素處于只讀狀態(tài)時的樣式,在ff下需要寫成-moz-read-only的形式 
7.E:read-write選擇器用來指定當元素處于非只讀狀態(tài)時的樣式。在ff下需要寫成-moz-read-write的形式 
8.E:checked選擇器用來指定當表單中的radio單選按鈕或checkbox復選框處于選取狀態(tài)的時的樣式。在ff下需要寫成-moz-checked的形式 
9.E:default選擇器用來指定當頁面打開時默認處于選取狀態(tài)的單選按鈕或者復選框的樣式。需要注意的是,即使用戶將默認設定為選取狀態(tài)的單選按鈕或者復選框修改為非選取狀態(tài),使用E:default選擇器設定的樣式依然有效。 
10.E:indeterminate選擇器用來指定當頁面打開時,如果一組單選按鈕中任何一個單選按鈕都沒有設定為選取狀態(tài)時的整組的單選按鈕的樣式。如果用戶選中這組中的任何一個單選按鈕,那么整組的單選按鈕的樣式被取消。 
11.E::selection選擇器用來指定當元素處于選中狀態(tài)時的樣式。這里需要注意的是:在ff下使用時,需要寫成-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>


Weiter lernen
||
<!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>
einreichenCode zurücksetzen