直接用:checked伪类能控制开关状态，因其响应checkbox原生状态变化，无需JS且兼容IE9+；label与input需正确关联，input不可display:none而应隐藏；滑块动画用::after配合transform实现；深色模式用prefers-color-scheme适配，禁用状态需用aria-disabled或class控制；pointer-events:none加在input上以保留可访问性。
为什么直接用 :checked 伪类就能控制开关状态
因为 <input type="checkbox"> 的原生状态变化会实时触发 :checked，CSS 不需要 JS 就能响应——这是纯 CSS 开关的底层依据。浏览器对这个伪类的支持非常稳定（IE9+），且无重绘性能问题。
常见错误是把 label 和 input 的关联写错，导致点击无效：
- 必须用 for 属性绑定 id，或让 input 包在 label 内
- input 不能设 display: none（会失去可访问性），应改用 position: absolute; opacity: 0; pointer-events: none;
如何用 ::before 和 ::after 实现滑动动画
开关的“滑块”和“轨道”通常由 label 的伪元素承担：轨道用 ::before，滑块用 ::after。关键点在于动画必须作用于 transform 或 left，而非 margin 或 width（后者会触发布局重排）。
-
label::before设为固定宽高 +border-radius模拟轨道背景 -
label::after设为较小正方形，position: absolute定位在左侧，通过transform: translateX()移动 - 给
label::after加transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)，比默认ease更顺滑 - 当
input:checked + label::after时，把transform改为translateX(24px)（假设轨道宽 52px，滑块宽 20px）
怎么让开关支持深色模式与禁用状态
禁用状态不能只靠 input:disabled，因为伪元素无法继承该状态；必须用 label[aria-disabled="true"] 或直接在 label 上加 class 控制样式。
- 深色模式下，用
@media (prefers-color-scheme: dark)覆盖轨道和滑块的background-color - 禁用时，给
label加opacity: 0.5; cursor: not-allowed;，同时移除transition防止点击后残留动画 - 别忘了用
aria-checked同步更新属性值，方便屏幕阅读器识别
为什么 pointer-events: none 必须加在 input 上而不是 label
如果加在 label 上，整个开关就点不动了；加在 input 上是为了隐藏它、防止它遮挡 label 的点击区域，同时保留语义和键盘可访问性（Tab 仍能聚焦，Space 仍能切换）。
立即学习“前端免费学习笔记（深入）”；
容易被忽略的是：某些低版本 Safari 对 pointer-events: none 在 input 上的支持不一致，稳妥做法是额外加 z-index: -1 并确保 label 的 z-index 更高。
