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{
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 进行隐藏和再现。
但是我们想跟进一步，把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>
转载：http://www.manongjc.com/article/1283.html
时间： 2024-10-17 07:46:42