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

时间 2019-11-09

原文原文链接

css :checked伪类选择器介绍

css :checked伪类选择器用于选择匹配全部被选中的单选按钮(radio)或复选框(checkbox),你能够结合:checked伪类选择器和:not选择器来匹配选择没有被选中的单选按钮或复选框。css

语法：html

:checked { style properties }

如：前端

input:checked{ background-color:red; }

设置被选中的单选按钮(radio)或复选框(checkbox)的背景颜色为红色(单选框和复选框只有在Opera浏览器上才能设置背景颜色)浏览器

css :checked伪类选择器实例

为全部选中的单选按钮和复选框元素设置背景颜色：spa

<!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效果。3d

首先定义页面结构：code

<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 的选中态进行设置orm

#toggle-trigger:not(checked) ~ .toggle-item{ display: block; } #toggle-trigger:checked ~ .toggle-item{ display: none; }

此时，咱们经过点击选中或者取消选中checkbox，就能对 .toggle-item 进行隐藏和再现。xml

可是咱们想跟进一步，把toggle-trigger的范围扩展到checkbox以外，由于在展示toggle效果时，触发toggle的部分并不局限于checkbox一种形式。这时咱们只须要使用label标签便可，label标签有一个for属性，经过设置for属性，能够将label标签指向特定的input元素，同时将checkbox隐藏，既能够达到点击label标签来触发toggle的效果。htm

<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