所謂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 只支援chrome ------------
E:invalid 支援firefox、safari、Opera、chrome 不支援ie8
E:valid 支援firefox、safari、Opera、chrome 不支援ie8
E:required 支援firefox、safari、Opera、chrome 不支援ie8
E:optional 支援firefox、safari、Opera、chrome 不支援ie8
E:in-range 支援firefox、safari、Opera、chrome 不支援ie8
E:out-of-rang 支援firefox、safari、Opera、chrome 不支援ie8
下面就其使用做詳細的說明;
1、選取器E:hover、E:active和E:focus
1)、E:hover選取器被用來指定當滑鼠指標移動到元素上時元素所使用的樣式
使用方法：
<元素>:hover{
CSS樣式
}
我們可以在“<元素>”中添加元素的type屬性。
例：
input[type="text"]:hover{
CSS樣式
}
2)、E:active選取器被用來指定元素被啟用時使用的樣式
3)、E:focus選取器被用來指定元素獲得游標聚焦點使用的樣式，主要是在文字框控制項獲得聚焦點並進行文字輸入時使用。
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>選取器E:hover、E:active和E:focus</title> <style> input[type="text"]:hover{ background: green; } input[type="text"]:focus{ background: #ff6600; color: #fff; } input[type="text"]:active{ background: blue; } input[type="password"]:hover{ background: red; } </style> </head> <body> <h1>選取器E:hover、E:active和E:focus</h1> <form> 姓名：<input type="text" placeholder="請輸入姓名"> <br/> <br/> 密碼：<input type="password" placeholder="請輸入密碼"> </form> </body> </html>
2、E:enabled偽類別選取器與E:disabled偽類別選取器
1)、E:enabled選取器被用來指定當元素處於可用狀態時的樣式。
2)、E:disabled選取器被用來指定當元素處於不可用狀態時的樣式。
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:enabled偽類別選取器與E:disabled偽類別選取器</title> <style> input[type="text"]:enabled{ background: green; color: #ffffff; } input[type="text"]:disabled{ background: #727272; } </style> </head> <body> <h1>E:enabled偽類別選取器與E:disabled偽類別選取器</h1> <form> 姓名：<input type="text" placeholder="請輸入姓名" disabled> <br/> <br/> 學校：<input type="text" placeholder="請輸入學校"> </form> </body> </html>
3、E:read-only偽類別選取器與E:read-write偽類別選取器
1)、E:read-only選取器被用來指定當元素處於唯讀狀態時的樣式。
2)、E:read-write選取器被用來指定當元素處於非唯讀狀態時的樣式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>read-only偽類別選取器與E:read-write偽類別選取器</title> <style> input[type="text"]:read-only{ background: #000; color: green; } input[type="text"]:read-write{ color: #ff6600; } </style> </head> <body> <h1>read-only偽類別選取器與E:read-write偽類別選取器</h1> <form> 姓名：<input type="text" placeholder="請輸入姓名" value="winson" readonly> <br/> <br/> 學校：<input type="text" placeholder="請輸入學校"> </form> </body> </html>
4、偽類別選取器E:checked、E:default和indeterminate
1)、E:cehcked偽類別選取器用來指定當表單中的radio單選框或者是checkbox複選框處於選取狀態時的樣式。
2)、E:default選取器用來指定當頁面開啟時預設處於選取狀態的單選框或複選框的控制項的樣式。
3)、E:indeterminate選取器用來指定當頁面開啟時，一組單選框中沒有任何一個單選框被設定為選中狀態時，整組單選框的樣式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>checked偽類別選取器</title> <style> input[type="checkbox"]:checked{ outline: 2px solid green; } </style> </head> <body> <h1>checked偽類別選取器</h1> <form> 房屋狀態： <input type="checkbox">水 <input type="checkbox">電 <input type="checkbox">天然氣 <input type="checkbox">寬頻 </form> </body> </html>
預設的選擇項
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>default偽類別選取器</title> <style> input[type="checkbox"]:default{ outline: 2px solid green; } </style> </head> <body> <h1>default偽類別選取器</h1> <form> 房屋狀態： <input type="checkbox" checked>水 <input type="checkbox">電 <input type="checkbox">天然氣 <input type="checkbox">寬頻 </form> </body> </html>
<h1 style="color: rgb(0, 0, 0); font-family: Simsun; font-style: normal; font-variant: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">indeterminate偽類別選取器</h1><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>indeterminate偽類別選取器</title> <style> input[type="radio"]:indeterminate{ outline: 2px solid green; } </style> </head> <body> <h1>indeterminate偽類別選取器</h1> <form> 性別： <input type="radio">男 <input type="radio">女 </form> </body> </html>
5、偽類別選取器E::selection
1)、E:selection偽類別選取器用來指定當元素處於選中狀態時的樣式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>偽類別選取器E::selection</title> <style> ::selection{ background: green; color: #ffffff; } input[type="text"]::selection{ background: #ff6600; color: #ffffff; } </style> </head> <body> <h1>偽類別選取器E::selection</h1> <p>今天，開發搜尋方塊，出現了bug，現在沒有找到原因！今天，開發搜尋方塊，出現了bug，現在沒有找到原因！今天，開發搜尋方塊，出現了bug，現在沒有找到原因！今天，開發搜尋方塊，出現了bug，現在沒有找到原因！今天，開發搜尋方塊，出現了bug，現在沒有找到原因！</p> <input type="text" placeholder="文本"> </body> </html>
6、E:invalid偽類別選取器與E:valid偽類別選取器
1)、E:invalid偽類別選取器用來指定，當元素內容不能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容不符合元素規定的格式時的樣式。
2)、E:valid偽類別選取器用來指定，當元素內容能通過HTML5通過使用的元素的諸如requirde等屬性所指定的檢查或元素內容符合元素規定的格式時的樣式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:invalid偽類別選取器與E:valid偽類別選取器</title> <style> input[type="email"]:invalid{ color: red; } input[type="email"]:valid{ color: green; } </style> </head> <body> <h1>E:invalid偽類別選取器與E:valid偽類別選取器</h1> <form> <input type="email" placeholder="請輸入郵箱"> </form> </body> </html>
7、E:required偽類別選取器與E:optional偽類別選取器
1)、E:required偽類別選取器用來指定允許使用required屬性，而且已經指定了required屬性的input元素、select元素以及textarea元素的樣式。
2)、E:optional偽類別選取器用來指定允許使用required屬性，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:required偽類別選取器與E:optional偽類別選取器</title> <style> input[type="text"]:required{ background: red; color: #ffffff; } input[type="text"]:optional{ background: green; color: #ffffff; } </style> </head> <body> <h1>E:required偽類別選取器與E:optional偽類別選取器</h1> <form> 姓名：<input type="text" placeholder="請輸入姓名" required> <br/> <br/> 學校：<input type="text" placeholder="請輸入學校"> </form> </body> </html>
8、E:in-range偽類別選取器與E:out-of-range偽類別選取器
1)、E:in-range偽類別選取器用來指定當元素的有效值被限定在一段範圍之內，且實際的輸入值在該範圍之內時的樣式。
2)、E:out-of-range偽類別選取器用來指定當元素的有效值被限定在一段範圍之內，但實際輸入值在超過時使用的樣式。
例如
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>E:in-range偽類別選取器與E:out-of-range偽類別選取器</title> <style> input[type="number"]:in-range{ color: #ffffff; background: green; } input[type="number"]:out-of-range{ background: red; color: #ffffff; } </style> </head> <body> <h1>E:in-range偽類別選取器與E:out-of-range偽類別選取器</h1> <input type="number" min="0" max="100" value="0"> </body> </html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
