好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

CSS3:checked伪类选择器妙用_html/css_WEB-ITnose

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

:checked伪类选择器顾名思义,表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中,我们常用:hover伪类来设置鼠标悬浮时的样式,而由于checked状态的改变需要用户进行点击操作,使用:checked伪类,我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时,有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素,了解:checked伪类的定义之后,我们完全可以用纯CSS实现toggle效果。

首先定义页面结构:

        .toggle-item{         width: 100px;         height:  100px;         background-color: pink;     }       

查看更多关于CSS3:checked伪类选择器妙用_html/css_WEB-ITnose的详细内容...

  阅读:39次