:checked伪类用于设置被选中的复选框或单选按钮的样式，如input[type="checkbox"]:checked{accent-color:red;}改变勾选色；通过隐藏原生控件并结合label与相邻兄弟选择器（+）可自定义外观，例如.custom-checkbox input:checked + .checkmark::after显示自定义对号；利用#toggle:checked ~ #content可控制后续元素显示，实现点击展开内容等交互效果。
使用 :checked 伪类可以针对被选中的复选框（checkbox）或单选按钮（radio）设置特定样式。它适用于 或 元素，当它们处于选中状态时触发。
基本语法与作用
:checked 选择器匹配所有被用户选中的表单控件，常见于复选框和单选按钮。
示例：input[type="checkbox"]:checked {
accent-color: red;
}
这段代码会让选中的复选框的勾选颜色变为红色。现代浏览器支持 accent-color 属性来快速改变原生控件的颜色。
自定义复选框外观（隐藏原生控件）
若想完全自定义样式，通常需要隐藏原生复选框，并用 CSS 构建视觉替代元素。
立即学习“前端免费学习笔记（深入）”；
HTML 结构：
CSS 样式：
.custom-checkbox .checkmark {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ccc;
border-radius: 4px;
margin-right: 8px;
position: relative;
}
.custom-checkbox input:checked + .checkmark::after {
content: "✔";
color: green;
font-size: 14px;
position: absolute;
top: -2px;
left: 2px;
}
这里利用了相邻兄弟选择器（+）在输入框被选中时，修改旁边的 .checkmark 元素内容。
结合 label 实现更灵活控制
将 放在 内部或通过 for 关联，点击 label 即可切换选中状态，提升交互体验。
利用这种结构，还可以实现非表单元素的显示/隐藏，比如折叠菜单、弹出层等。
例子：点击切换内容显示这里是隐藏内容
通过 :checked 配合通用兄弟选择器（~），可以控制后续元素的显示状态。
基本上就这些。核心是理解 :checked 能响应用户选择行为，并结合其他 CSS 选择器实现样式或布局变化。不复杂但容易忽略细节，比如隐藏原生控件或正确使用标签关联。
