使用CSS伪类:checked可实现无JavaScript的开关按钮，通过隐藏复选框与label关联，利用:checked控制样式切换，结合transition实现平滑动画，提升可访问性需保留for属性、添加aria-label和:focus支持。
使用CSS伪类:checked可以轻松实现美观的开关按钮样式，无需JavaScript。这种做法依赖于复选框（checkbox）或单选按钮（radio）的选中状态来切换视觉效果，非常适合用于主题切换、设置开关等场景。
基本原理
将一个隐藏的input（type="checkbox"）与label配合使用，利用label的for属性关联input。通过:checked伪类控制label或其他相邻元素的样式变化，从而实现“开关”效果。
HTML结构
结构简单清晰：
<input type="checkbox" id="switch" class="switch-input"> <label for="switch" class="switch-label"></label>
CSS样式实现
关键在于隐藏原生输入框，并用自定义样式绘制开关：
立即学习“前端免费学习笔记（深入）”；
说明：
- 使用display: none隐藏input
- .switch-label模拟开关轨道，::before伪元素作为滑块
- :checked + .switch-label选择器在选中时改变背景色
- 滑块通过transform: translateX移动位置
增强可访问性
保持语义化很重要：
- 保留label的for属性确保点击区域可用
- 可添加aria-label提升屏幕阅读器支持
- 考虑:focus样式增强键盘导航体验
基本上就这些。利用:checked和相邻兄弟选择器，就能做出平滑且兼容性良好的开关按钮，不复杂但容易忽略细节。
