當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

css 伪类选择器:checked实例讲解

發布時間：2023/12/31 综合教程 45 生活家

生活随笔收集整理的這篇文章主要介紹了 css 伪类选择器:checked实例讲解小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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{
          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{
      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实例讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。