偽類選擇器：checked
阿新 • • 發佈：2019-01-06
由上圖菜鳥教程定義可知：checked偽類僅僅適用於單選按鈕或則複選框，所以如果在其他型別的元素定義checked偽類，checked會失效。具體用法參考下列程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" /> <title>偽類選擇器:checked</title> <style type="text/css"> span{color: red;} label{border: 2px solid black;} .input1:checked+.checkbox1{border: 2px dashed blue;background-color: brown;} .checkbox1{border: 2px dashed red;background-color: bisque;} </style> </head> <body> <p>首先<span>偽類選擇器:checked</span>適用於<span>input type="checkbox"</span>,<span>input type="radio"</span></p> <p>應用於checkbox複選框</p> <label> <input class="input1" type="checkbox" checked="checked"/> <span class="checkbox1">ksghkajhsgapiuslghrsglkjhdir</span> </label><br /> <p>應用於radio單選框</p> <label> <input class="input1" type="radio" name="radio" /> <span class="checkbox1">ksghkajhsgapiuslghrsglkjhdir</span> </label><br /> <label> <input class="" type="radio" name="radio" checked="checked"/> <span class="">ksghkajhsgapiuslghrsglkjhdir</span> </label> </body> </html>
關於其用法，注意小點：
1，在為類選擇器選擇的時候，使用原始的input：checked+class/label（每當選中時，改變其後class/label中的內容樣式）
2，經驗之談：在使用radio or checkbox 時，父類最好使用<label>標籤，這樣可以使點選<span>內容時格改變checkbox or radio 的狀態，增強使用者互動感。
關於radio使用：
1，每個<input type="radio"/>如果沒有寫name="?"則會預設的給每個input設定不同的name事件名，這樣就表面的打破了其單選的意義，所以，在用時，一定要給其事件命名，且名稱相同。
2，單選~顧名思義就是必須要有一個選中，一旦你已選
執行截圖：
