纯 CSS 开关必须用 作为状态源，因其 :checked 伪类仅响应其 checked 属性变化；直接样式化该元素无效，因 UA 样式强制覆盖宽高、圆角等，应隐藏但保留语义与可访问性，推荐 position: absolute; opacity: 0; width: 1px; height: 1px。
必须用 <input type="checkbox"> 作为状态源，其他方式都不是“纯 CSS 开关”——:checked 只响应它的 checked 属性变化，没有它，整个机制就断了。
为什么不能直接样式化 <input type="checkbox">
浏览器 UA 样式会强制覆盖 width、height、border-radius、background 等属性。你在 Chrome、Safari 或 Firefox 里写的 width: 40px 几乎一定无效——不是没加载，是被压掉了。
正确做法是隐藏它但不破坏语义和可访问性：
-
position: absolute; opacity: 0; width: 1px; height: 1px;（推荐，保焦点、保屏幕阅读器可读） - 别用
display: none：部分 Safari（尤其 iOS WebView）会丢失:checked检测 - 别用
visibility: hidden：屏幕阅读器无法聚焦，破坏可访问性
:checked + .toggle 和 :checked ~ .theme-icon 怎么选
两者都要求 <input> 必须在目标元素“之前”，且同属一个父容器；顺序错了，选择器完全不匹配。
-
:checked + .toggle：只影响紧邻的下一个兄弟元素，适合控制开关滑块本体（比如自定义轨道或手柄） -
:checked ~ .theme-icon：影响后续所有同级兄弟，适合同时控制图标、文字、边框色等分散元素 - 如果目标是子元素（如开关内部的
<span class="label"></span>），把<input>和目标包进同一父容器，用:checked > .label或:checked .label - 错误写法：
label:has(input:checked)——:has()不支持伪类作参数，语法非法
动画写在哪？为什么位移要用 transform: translateX()
动画必须作用于**视觉元素**（如 label::after、.toggle-handle），<input> 本身不渲染任何东西，加 transition 完全没反应。
- 滑块位移优先用
transform: translateX()，避免用left或margin-left—— 后者触发重排，动画卡顿 -
transition别只写0.3s，加缓动函数更自然：transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) - 深色模式下若需同步变色，记得给
background-color也加transition，否则颜色跳变明显 -
label必须通过for属性或包裹结构绑定到<input>，否则点击无响应——用户实际点的是label，不是那个看不见的 checkbox
最容易被忽略的是 DOM 顺序和 label 绑定：input 放错位置、label 没绑对、或者父容器 overflow: hidden 裁剪了点击热区，都会导致整个开关“点不动”。调试时先临时取消隐藏逻辑，确认原生 checkbox 能点，再逐步加回 opacity: 0 和 position: absolute，看哪一步断掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
