必须用 <input type="checkbox"> 作为状态源，它是唯一被所有浏览器稳定支持且能被 :checked 精确捕获的原生状态载体；隐藏时应使用 position: absolute; opacity: 0; pointer-events: none; 而非 display: none；<input> 必须置于目标元素之前并同属一父容器，才能通过 + 或 ~ 正确控制样式；动画应基于 transform 和 cubic-bezier 实现平滑过渡；<label> 需包裹 <input> 并设足够热区以保障可访问性与点击响应。
必须用 <input type="checkbox"> 作为状态源
没有它，:checked 就没意义——CSS 无法凭空产生布尔状态，只能响应真实 DOM 元素的属性变化。<input type="checkbox"> 是唯一被所有浏览器稳定支持、且能被 :checked 精确捕获的原生状态载体。别试图用 <div data-state="on"> 配合 CSS 自定义属性模拟，那需要 JS 修改，就不是“纯 CSS”了。
常见错误：用 display: none 或 visibility: hidden 隐藏 checkbox，部分 Safari 版本会丢失 :checked 检测；正确做法是 position: absolute; opacity: 0; pointer-events: none;，既保语义，又稳触发。
:checked 只能影响后续兄弟或后代元素
这是最常踩坑的位置。你想控制一个开关滑块和它右边的文字，但把 <input> 放在了文字后面，那 input:checked + .slider 根本不生效——+ 是“紧邻后续兄弟”，顺序错了就断链。
- 要控制同级元素（如滑块、图标、文字），
<input>必须放在它们前面，且共用同一父容器 - 要控制子元素（比如点击 label 展开一个
<div class="panel">），就把<input>和<div>包进同一个<div>，再用input:checked ~ .panel或input:checked > .panel - 别用
body:has(input:checked)这种写法——太宽泛，容易误触发；必须绑定具体 ID，如#theme-toggle
动画平滑的关键在 transform 和 transition-timing-function
开关滑块的位移不要用 left 或 margin-left，那会触发重排；改用 transform: translateX()，只走合成层，60fps 更稳。
立即学习“前端免费学习笔记（深入）”；
transition 别只写 0.3s，加个缓动函数更自然：
input:checked + .toggle::after {
transform: translateX(20px);
}
.toggle::after {
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
这个贝塞尔曲线比默认的 ease 更有弹性感；深色模式下若需同步变色，记得给 background-color 也加 transition，否则颜色跳变明显。
label 绑定失效 = 整个开关点不动
用户实际点击的是 <label>，不是看不见的 checkbox。如果没绑对，:checked 永远不会变。
- 推荐结构：用包裹式
<label><input>...</label>，不用for/id配对，避免 ID 冲突或拼错 - 确保
<label>有足够点击热区（比如设display: block、加padding），移动端尤其要注意 - 别给
<input>设z-index覆盖<label>，否则点不到
可访问性不能丢：隐藏 checkbox 时保留 aria-label，键盘用户按 Space 键仍能切换；Firefox 不支持 :has()，做主题切换时得准备 JS 降级路径——这点很容易被忽略，但上线后用户一反馈就来不及补。
