CSS3 :checked伪类选择器妙用

jabez128 commented 8 years ago

CSS3中的伪类选择器例如:hover，:before，:after在已经在前端开发中被广泛使用，但是可能开发者还不太熟悉:checked这个伪类选择器。本文将介绍:checked这个伪类选择器以及如何使用它写出更加有优雅的代码。

:checked伪类选择器顾名思义，表示的是type="checkbox"的input元素被选中的状态。在前端开发中，我们常用: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进行隐藏和再现。

2016-06-01 2 13 14 2016-06-01 2 16 37

但是我们想跟进一步，把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>

根据caniuse的数据，:checked伪类的支持程度基本达到了100%。在下一个项目里面，你会愿意使用它嘛？

参考文章

You Don't Need JavaScript for That!

boypt commented 8 years ago

最近在翻看别人的纯css做的modal例子，发现还有个:target伪选择器也很好用，这样<a href="#modal">就能打开一个modal层。

teamrun commented 8 years ago

checked如果想要影响其他元素, 需要用~兄弟选择器, 而在 IE8上, 兄弟选择器性能炒鸡差, 差到...若干秒后兄弟元素的样式才变更... 2013还是14年踩过的坑...

jabez128 / jabez128.github.io

CSS3 :checked伪类选择器妙用 #8

参考文章