CSS3 :checked 伪类选择器妙用_html/css_WEB-ITnose
:checked伪类选择器顾名思义,表示的是 type="checkbox" 的input元素被选中的状态。在前端开发中,我们常用:hover伪类来设置鼠标悬浮时的样式,而由于checked状态的改变需要用户进行点击操作,使用:checked伪类,我们则可以设置鼠标点击后的状态。在使用zepto、jQuery库时,有一个经常使用的方法toggle用来隐藏和再现页面上的某个元素,了解:checked伪类的定义之后,我们完全可以用纯CSS实现toggle效果。
首先定义页面结构:
接着,我们对 #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的效果。
根据caniuse的数据,:checked伪类的支持程度基本达到了100%。在下一个项目里面,你会愿意使用它嘛?
参考文章
You Don't Need JavaScript for That!
上一篇: STM32 HAL库I2C驱动OLED SSD1306 12864,带FreeRTOS
下一篇: 阿里Java学习路线:阶段 1:Java语言基础-Java语言高级特性:第7章:Java基础类库:课时27:CharSequence接口
推荐阅读
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
CSS3选择器(基础选择器、属性选择器、伪类选择器、选择器策略)_html/css_WEB-ITnose
-
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)_html/css_WEB-ITnose
-
css3中关于伪类的使用_html/css_WEB-ITnose
-
CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)_html/css_WEB-ITnose
-
前端笔记知识点整合之HTML5&CSS3(中)选择器&伪类伪元素&CSS3效果&渐变背景&过渡
-
伪类选择器和内联元素的一点点小困惑_html/css_WEB-ITnose
-
CSS3 :checked 伪类选择器妙用_html/css_WEB-ITnose
-
CSS动态伪类选择器温故-3_html/css_WEB-ITnose