:checked伪类通过关联label实现无JS交互，如开关、下拉菜单等；利用隐藏的checkbox/radio，结合label触发状态变化，用CSS控制后续元素显示，适用于现代浏览器。
在CSS中，:checked 伪类用于表示被选中的单选按钮（radio）或复选框（checkbox）。将它与 label 标签配合使用，可以实现无需JavaScript的交互式界面效果，比如开关、下拉菜单、模态框等。
基本原理
:checked 可以监听 input[type="checkbox"] 或 input[type="radio"] 是否被选中。而 label 的 for 属性可以关联对应的表单元素，点击 label 就相当于点击了 input，从而触发 checked 状态变化。
通过CSS选择器，我们可以根据 :checked 状态控制其他元素的样式，实现视觉反馈或布局切换。
基础用法示例
以下是一个简单的开关效果：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" id="toggle" /> <label for="toggle">点击我显示/隐藏内容</label> <div class="content">这是一段被控制显示的内容</div>
#toggle {
display: none; /* 隐藏原始的 checkbox */
}
<p>.content {
display: none;
}</p><h1>toggle:checked + label + .content {</h1><p>display: block;
}</p>说明：
- input 被隐藏，但依然能通过 label 触发状态变化
- 当 checkbox 被选中时，:checked 生效
- 使用相邻兄弟选择器（+）和普通兄弟选择器（~）可以选中后面的元素
- 上面例子中，#toggle:checked + label + .content 表示：当 checkbox 被选中时，选中其后紧跟的 label 再后面的 .content 元素
常见应用场景
1. 自定义复选框或开关
用 label 模拟视觉样式，真实 input 隐藏，通过 :checked 控制伪元素显示对勾或背景色。
2. 手风琴菜单 / 下拉面板
每个标题对应一个隐藏的 checkbox，点击 label 展开内容区域。
3. 模态框（Modal）
利用 label 触发 checkbox，再通过 :checked 显示遮罩层和弹窗，关闭可用另一个 label 或伪元素实现。
4. 图片轮播或选项卡
多个 radio 按钮配合 label 切换不同内容块，类似原生 tab 效果。
注意事项
使用时注意以下几点：
- input 必须有 id，label 的 for 必须与其匹配
- DOM 结构要合理，通常 input 放在 label 前面或包裹在一起
- 使用 + 或 ~ 选择器来控制后续元素的样式
- 不支持 IE8 及以下，现代浏览器均支持
- 无法监听外部点击关闭，复杂交互仍需 JavaScript
基本上就这些。合理利用 :checked 和 label，可以做出轻量、无JS的交互组件，适合静态页面或作为降级方案。
