:checked 仅标记勾选状态，视觉效果依赖+或~选择器传递状态；+要求紧邻，~更稳妥；动画需加在.slider上并声明transition；隐藏input应避免display:none；移动端需注意pointer-events和touch-action。
:checked 本身不控制视觉，它只标记用户真实点击触发的勾选状态；真正起作用的是 + 或 ~ 这类兄弟选择器，把状态“传”给后面能动画的元素。
为什么 :checked + .slider 有时不生效
因为 + 要求目标元素必须紧挨在 input 后面，中间不能有任何其他同级节点（包括注释、空格、文本节点）。实际 HTML 常带缩进或换行，导致结构看似连续实则断裂。
- 写成
<input><span class="slider"></span>才安全；<input>\n <span class="slider"></span>就失效 - 用
:checked ~ .slider更稳妥——它匹配所有后续同级的.slider，不管中间隔了几个元素 -
~要求两者必须有共同父容器，否则完全选不到
滑块动画该加在哪个元素上
别给 input:checked 加 transition——它没可动画的视觉属性。动画必须落在 .slider 这类替身元素上。
- 推荐用
transform: translateX()，比left或margin-left更高效，不触发重排 -
.slider初始位置通常设为transform: translateX(0)，选中时变成translateX(100%)或具体像素值 - 必须显式声明
transition: transform 0.2s ease，否则变化是瞬时的
隐藏复选框的正确方式
用 display: none 会彻底禁用 :checked 伪类——浏览器认为该元素已不可交互，状态变更不再触发样式重计算。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是
position: absolute; opacity: 0; width: 0; height: 0; - 或者
position: absolute; left: -9999px;，保留 tab 键盘焦点能力 - 同时确保
label正确绑定：for="id"或把input包在label内，否则点击无响应
移动端点击区域失效的常见原因
表面看开关能点，但实际没切换，往往不是 CSS 问题，而是底层 input 没被真正触发。
- 检查是否设置了
pointer-events: none在input上却忘了移除——这会让点击直接穿透 - 确认
label的z-index足够高，没被其他层遮挡 - 某些安卓 WebView 对
opacity: 0的input点击支持不稳定，建议补一句touch-action: manipulation;
最易被忽略的一点：所有依赖 :checked 的效果，都建立在用户真实点击触发状态变更的基础上；JS 直接设置 el.checked = true 不会激活伪类，除非再手动触发一次 click() 事件。
