css中的checked是伪类选择器的一种，用于匹配处于选中状态的表单元素，最常见的使用场景是操作单选框和复选框的选中样式。当页面中的单选框或者复选框被用户勾选后，对应的元素就会匹配到checked伪类，开发者可以针对这个状态编写专属的样式规则。
checked伪类的基本语法
checked伪类的语法格式非常简单，通常和表单元素选择器结合使用，基本写法如下：
/* 匹配所有被选中的复选框 */
input[type="checkbox"]:checked {
/* 样式规则 */
}
/* 匹配所有被选中的单选框 */
input[type="radio"]:checked {
/* 样式规则 */
}
需要注意的是，checked伪类只能作用于支持选中状态的表单元素，对于文本输入框、下拉选择框等不支持选中状态的表单控件，使用checked伪类不会生效。
checked伪类的常见使用场景
1. 自定义复选框样式
浏览器默认的复选框样式比较单一，很多场景下需要自定义复选框的选中效果，这时候就可以用checked伪类实现。下面是一个简单的自定义复选框示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 隐藏默认复选框 */
.custom-checkbox input {
display: none;
}
/* 自定义复选框外观 */
.custom-checkbox .checkmark {
display: inline-block;
width: 20px;
height: 20px;
border: 2px solid #ccc;
border-radius: 4px;
position: relative;
cursor: pointer;
}
/* 选中状态下的样式 */
.custom-checkbox input:checked + .checkmark {
background-color: #409eff;
border-color: #409eff;
}
/* 选中后的对勾 */
.custom-checkbox input:checked + .checkmark::after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<label class="custom-checkbox">
<input type="checkbox">
<span class="checkmark"></span>
同意用户协议
</label>
</body>
</html>
2. 切换内容显示
checked伪类还可以结合兄弟选择器实现点击表单元素切换内容显示的效果，不需要依赖JavaScript代码。比如实现点击按钮展开收起内容：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
/* 隐藏默认单选框 */
.toggle-input {
display: none;
}
/* 默认隐藏内容区域 */
.toggle-content {
display: none;
padding: 10px;
border: 1px solid #eee;
margin-top: 10px;
}
/* 选中第一个单选框时显示内容 */
#show:checked ~ .toggle-content {
display: block;
}
/* 选中第二个单选框时隐藏内容 */
#hide:checked ~ .toggle-content {
display: none;
}
</style>
</head>
<body>
<label>
<input type="radio" name="toggle" id="show" class="toggle-input">
显示内容
</label>
<label>
<input type="radio" name="toggle" id="hide" class="toggle-input">
隐藏内容
</label>
<div class="toggle-content">
这里是需要切换显示的内容区域
</div>
</body>
</html>
使用checked伪类的注意事项
- checked伪类只能匹配用户手动选中或者通过代码设置
checked属性为true的表单元素，动态修改元素的选中状态后，样式会自动更新。 - 如果需要对非表单元素使用类似选中状态的效果，checked伪类无法实现，需要结合其他方案比如添加自定义类名来控制样式。
- 在使用checked伪类控制兄弟元素样式时，需要注意选择器的层级关系，目标元素必须是选中元素的后续兄弟元素，否则样式规则不会生效。
总的来说，checked是css中非常实用的伪类选择器，能够帮助开发者快速实现表单选中状态的样式定制和简单的交互效果，减少不必要的JavaScript代码编写，提升页面的性能和维护性。