css 僞類選擇器:checked實例講解

時間 2019-11-09

原文原文鏈接

css :checked僞類選擇器介紹

css :checked僞類選擇器用於選擇匹配全部被選中的單選按鈕(radio)或複選框(checkbox),你能夠結合:checked僞類選擇器和:not選擇器來匹配選擇沒有被選中的單選按鈕或複選框。css

語法：html

:checked { style properties }

如：前端

input:checked{ background-color:red; }

設置被選中的單選按鈕(radio)或複選框(checkbox)的背景顏色爲紅色(單選框和複選框只有在Opera瀏覽器上才能設置背景顏色)瀏覽器

css :checked僞類選擇器實例

爲全部選中的單選按鈕和複選框元素設置背景顏色：spa

<!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效果。3d

首先定義頁面結構：code

<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 的選中態進行設置orm

#toggle-trigger:not(checked) ~ .toggle-item{ display: block; } #toggle-trigger:checked ~ .toggle-item{ display: none; }

此時，咱們經過點擊選中或者取消選中checkbox，就能對 .toggle-item 進行隱藏和再現。xml

可是咱們想跟進一步，把toggle-trigger的範圍擴展到checkbox以外，由於在展示toggle效果時，觸發toggle的部分並不侷限於checkbox一種形式。這時咱們只須要使用label標籤便可，label標籤有一個for屬性，經過設置for屬性，能夠將label標籤指向特定的input元素，同時將checkbox隱藏，既能夠達到點擊label標籤來觸發toggle的效果。htm

<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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。