:checked 伪类选择器用于匹配选中的 radio 或 checkbox，可结合 label 和兄弟选择器实现自定义样式、主题切换等无 JS 交互效果，关键在于正确关联元素以确保可访问性。
:checked 是 CSS 中的一个伪类选择器，用于匹配处于“选中”状态的单选按钮（radio）或复选框（checkbox）输入元素。它在无需 JavaScript 的情况下实现交互式 UI 效果非常有用，比如显示隐藏内容、切换样式或创建自定义控件。
基本语法与使用场景
:checked 选择器可以配合 input 元素的 type="radio" 或 type="checkbox" 使用。当用户选中某个选项时，对应的样式规则就会生效。
常见用法包括：
- 自定义单选/复选样式
- 控制其他元素的显示与隐藏
- 制作无 JS 的开关、菜单或模态框
在复选框中的应用
当 checkbox 被勾选时，:checked 可以触发样式变化。例如，可以隐藏默认的复选框，并用自定义图标或背景表示选中状态。
立即学习“前端免费学习笔记（深入）”；
示例：自定义复选框外观
这里通过隐藏原生 checkbox，利用 label 和伪元素 ::after 来绘制一个绿色对勾，仅在 :checked 时显示。
在单选按钮中的应用
对于 radio 按钮，:checked 常用于突出当前选中项，或者联动控制其他区域的样式。
示例：根据选择切换主题颜色这是一个面板
利用兄弟选择器（~），可以基于哪个 radio 被选中来动态改变 .panel 的样式，实现简单的主题切换效果。
基本上就这些。:checked 结合 label、相邻兄弟选择器（+）和普通兄弟选择器（~），能实现丰富的视觉反馈和交互逻辑，是构建现代表单体验的重要工具。关键在于结构合理，确保可访问性和语义正确。不复杂但容易忽略细节，比如必须保证 input 和 label 关联正确才能点击 label 触发选中。
