纯 css 开关必须用 作为状态源，:checked 提供布尔状态但不渲染；直接样式化 checkbox 会被 ua 样式覆盖；隐藏需用 position: absolute; opacity: 0; width: 1px; height: 1px 保语义与可访问性；选择器匹配依赖 dom 顺序；动画须作用于视觉元素（如 label::after），而非 input 本身。
纯 CSS 开关切换必须用 <input type="checkbox"> 作为状态源，:checked 本身不渲染、不触发 JS，只提供一个可被选择器捕获的布尔状态；没它，就不是“开关”，只是静态样式。
为什么不能直接给 input[type="checkbox"] 写样式？
浏览器 UA 样式会强制覆盖 width、height、border-radius、background 等属性。你写的 width: 40px 在 Chrome/Safari/Firefox 中大概率无效——不是没加载，是被压掉了。
- 别用
display: none：它会让:checked在部分 Safari 版本中失效（尤其 iOS WebView） - 别用
visibility: hidden：屏幕阅读器无法聚焦，破坏可访问性 - 推荐组合：
position: absolute; opacity: 0; width: 1px; height: 1px;—— 隐藏但保语义、保焦点、保状态可读
:checked + label 和 :checked ~ .target 怎么选？
关键看 DOM 结构和控制范围。两者都要求 <input> 必须在目标元素“之前”且同级，否则选择器不匹配。
-
:checked + label：只影响紧邻的下一个兄弟元素，适合开关滑块本体（如自定义滑块容器） -
:checked ~ .theme-toggle-icon：影响后续所有同级兄弟，适合控制多个分散区域（如图标、文字、边框颜色） - 如果目标是子元素（比如开关内嵌的
<span></span>），把<input>放进同一父容器，用:checked > .inner或:checked .inner - 错误写法：
label:has(input:checked)——:has()不支持伪类作为参数，语法非法
移动端点击无响应？先查这三处
iOS Safari 和安卓 WebView 对点击区域更敏感，:checked 切换失败往往不是 CSS 问题，而是交互链断裂。
-
<label></label>没绑定for="xxx"或没包裹<input>→ 点击不触发状态变更 -
<label></label>上意外加了pointer-events: none（常见于 UI 框架重置样式） - 父容器有
overflow: hidden且<label></label>部分被裁剪 → 实际可点区域消失 - 调试技巧：临时删掉隐藏逻辑，确认原生 checkbox 能点；再逐步加回
opacity: 0、position: absolute，观察哪一步断掉
动画写在哪才真正动起来？
动画必须作用于**视觉元素**，不是 <input> 本身——它不渲染任何东西。
- 滑块位移：写在
label::after或.toggle-handle上，用transform: translateX() - 背景色切换：写在底座元素上，如
.toggle-base，配合transition: background-color 0.2s ease - 别写
input:checked { transition: all 0.3s }—— 它没视觉表现，过渡无效 - 惯性效果可用
cubic-bezier(0.3, 1.5, 0.7, 1)，但注意 Safari 对高 y 值贝塞尔曲线兼容性略差，建议加will-change: transform提前提示渲染引擎
真正难的不是让开关“看起来动”，而是确保它在各种设备、各种嵌套层级、各种框架样式干扰下，:checked 状态始终能被准确捕获并稳定驱动样式。DOM 位置、隐藏方式、label 绑定、移动端点击区域——漏掉任意一环，整个开关就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
