css 偽類別選取器:checked執行個體講解

來源:互聯網
上載者:User

標籤:結構   樣式   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執行個體講解

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.