:checked 伪类用于选中处于选中状态的表单元素，如 radio、checkbox 和 option。通过结合兄弟选择器可实现样式切换，例如 checkbox 选中时文字变绿：#agree:checked + label { color: green; }。常用于隐藏默认控件并自定义外观，如 .custom-checkbox:checked + label::before 设置背景色。还可控制其他元素显示，实现纯 CSS 的展开收起效果，如 .menu-toggle:checked ~ .toggle-content 显示内容。该选择器适合创建无 JavaScript 交互。
在 CSS 中，可以通过 :checked 伪类选择器来选中处于“选中状态”的表单元素，主要用于 单选按钮（radio）、复选框（checkbox） 和 下拉选项（option）。
基本语法
:checked 会匹配当前被用户选中的这些控件：
- input[type="radio"] 被选中时
- input[type="checkbox"] 被勾选时
用法示例
假设有一个 checkbox：
你想在它被选中时让文字变绿，可以这样写 CSS：
立即学习“前端免费学习笔记（深入）”；
#agree:checked + label {
color: green;
}
这里使用了相邻兄弟选择器（+），表示选中被勾选的 checkbox 后面紧跟着的 label。
配合隐藏元素实现自定义样式
常用于隐藏默认的 checkbox 或 radio，用 label 来显示自定义外观：
.custom-checkbox {
display: none;
}
.custom-checkbox + label::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
border: 1px solid #ccc;
margin-right: 8px;
}
.custom-checkbox:checked + label::before {
background-color: blue;
border-color: blue;
}
当 checkbox 被选中时，label 前的小方块会变成蓝色背景。
用于控制其他元素显示（如手风琴菜单）
利用 :checked 可以实现纯 CSS 的展开/收起效果：
.toggle-content {
display: none;
}
.menu-toggle:checked ~ .toggle-content {
display: block;
}
点击关联的 checkbox，就能显示对应内容。
基本上就这些。:checked 是一个非常实用的选择器，特别适合做无 JavaScript 的交互效果。关键是要结合 HTML 结构合理使用属性选择和兄弟选择器。
