答案：利用:checked伪类和隐藏的复选框，通过label触发状态变化，结合CSS选择器实现无需JavaScript的开关效果，如切换背景色、滑动动画及控制元素显隐。
在CSS中，可以利用 :checked 伪类结合HTML的复选框（checkbox）或单选按钮（radio）来创建无需JavaScript的切换开关。这种技术通过监听表单元素的选中状态，动态改变样式，实现视觉上的“开关”效果。
基本原理：:checked 伪类的作用
:checked 是一个CSS伪类，用于匹配被用户选中的 <input type="checkbox"> 或 <input type="radio"> 元素。当用户点击输入框使其处于选中状态时，:checked 样式生效，从而可以触发其他元素的外观变化。
制作一个简单的切换开关
以下是一个纯CSS切换开关的实现步骤：
1. HTML结构
立即学习“前端免费学习笔记（深入）”；
使用一个隐藏的 checkbox 和一个 label 来模拟开关：
<input type="checkbox" id="toggle" class="toggle-checkbox">
<label for="toggle" class="toggle-label"></label>
2. CSS样式
隐藏原始的输入框，用label绘制可视化的开关：
.toggle-checkbox {
position: absolute;
opacity: 0;
z-index: -1;
}
.toggle-label {
display: inline-block;
width: 60px;
height: 30px;
background: #ddd;
border-radius: 15px;
position: relative;
cursor: pointer;
transition: background 0.3s ease;
}
.toggle-label::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 26px;
height: 26px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s ease;
}
.toggle-checkbox:checked + .toggle-label {
background: #4cd964;
}
.toggle-checkbox:checked + .toggle-label::before {
transform: translateX(30px);
}
工作逻辑说明
当用户点击 label 时，关联的 checkbox 状态会切换（选中或未选中）。CSS中的 :checked 捕捉到选中状态后，通过相邻兄弟选择器（+）修改 label 的背景色和内部圆点的位置，实现滑动开关的视觉效果。
关键点：
- 使用 opacity: 0 隐藏原生 checkbox，保留其功能
- 利用 label 的 for 属性 关联 input，提升可访问性
- :checked + .toggle-label 实现状态驱动的样式切换
- 添加 transition 让动画更平滑
扩展用途
这种模式可用于主题切换、设置项开关、菜单展开等场景。例如，控制一个面板的显示隐藏：
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle">菜单开关</label>
<div class="menu-panel">内容区域</div>
CSS中使用：
.menu-panel { display: none; }
#menu-toggle:checked ~ .menu-panel { display: block; }
这里用到了~ 通用兄弟选择器，可以控制后续任意兄弟元素的显示状态。
基本上就这些。通过:checked，配合合理的HTML结构和CSS选择器，就能做出响应式的开关交互，无需一行JavaScript。不复杂但容易忽略细节，比如label的for属性和元素顺序必须正确。
