css :checked偽類選擇器介紹
css :checked偽類選擇器用於選擇匹配所有被選中的單選按鈕(radio)或復選框(checkbox),你可以結合:checked偽類選擇器和:not選擇器來匹配選擇沒有被選中的單選按鈕或復選框。
語法：
:checked { style properties }如：
input:checked{ background-color:red; }設置被選中的單選按鈕(radio)或復選框(checkbox)的背景顏色為紅色(單選框和復選框只有在Opera瀏覽器上才能設置背景顏色)
css :checked偽類選擇器實例
為所有選中的單選按鈕和復選框元素設置背景顏色：
<!DOCTYPE html> <html> <head> <style> input:checked { background:#ff0000; } </style> </head> <body> <form action=""> <input type="radio" checked="checked" value="male" name="gender" /> Male<br> <input type="radio" value="female" name="gender" /> Female<br> <input type="checkbox" checked="checked" value="Bike" /> I have a bike<br> <input type="checkbox" value="Car" /> I have a car </form> <p><b>Note:</b> This example works properly only in Opera!</p> </body> </html>
css :checked偽類選擇器妙用
在前端開發中，我們常用:hover偽類來設置鼠標懸浮時的樣式，而由於checked狀態的改變需要用戶進行點擊操作，使用:checked偽類，我們則可以設置鼠標點擊后的狀態。在使用zepto、jQuery庫時，有一個經常使用的方法toggle用來隱藏和再現頁面上的某個元素，了解:checked偽類的定義之后，我們完全可以用純CSS實現toggle效果。
首先定義頁面結構：
<style> .toggle-item{ width: 100px; height: 100px; background-color: pink; } </style> <div class="toggle"> <input id="toggle-trigger" type="checkbox" /> <div class="toggle-item"></div> </div>接着，我們對 #toggle-trigger 的選中態進行設置
#toggle-trigger:not(checked) ~ .toggle-item{ display: block; } #toggle-trigger:checked ~ .toggle-item{ display: none; }此時，我們通過點擊選中或者取消選中checkbox，就能對 .toggle-item 進行隱藏和再現。
但是我們想跟進一步，把toggle-trigger的范圍擴展到checkbox之外，因為在展現toggle效果時，觸發toggle的部分並不局限於checkbox一種形式。這時我們只需要使用label標簽即可，label標簽有一個for屬性，通過設置for屬性，可以將label標簽指向特定的input元素，同時將checkbox隱藏，既可以達到點擊label標簽來觸發toggle的效果。
<style> .toggle-item{ width: 100px; height: 100px; background-color: pink; } #toggle-trigger { display: none; } #toggle-trigger ~ :not(checked) ~ .toggle-item{ display: block; } #toggle-trigger:checked ~ .toggle-item{ display: none; } </style> <div class="toggle"> <label for="toggle-trigger">觸發器</label> <input id="toggle-trigger" type="checkbox" /> <div class="toggle-item"></div> </div>
轉載：http://www.manongjc.com/article/1283.html