標籤:結構 樣式 XML ref 有一個 狀態 開發 bsp ges
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
css 偽類別選取器:checked執行個體講解