CSS开关核心是隐藏原生checkbox，用label包裹并借助:checked选择器联动兄弟元素（推荐~而非+）控制滑块样式；仅对transform/opacity做过渡，扩大label点击区域，确保无障碍可用性。
怎么用 :checked 触发开关的视觉切换
核心就一条：把 隐藏，用相邻或父级元素模拟开关滑块，靠 :checked 选择器控制它的位置、颜色等样式。不是 JS 控制状态，而是 CSS 响应原生复选框的勾选变化。
常见错误是直接对 input 加样式——它没法被可靠地美化，尤其在 Safari 和旧版 Android 浏览器里。正确做法是用 label 包裹 input，再通过 input:checked + .switch-thumb 或 input:checked ~ .switch-thumb 来联动。
-
label必须和input正确关联（for属性或嵌套），否则点击无效 - 滑块元素（比如
.switch-thumb）得是input的兄弟或后续同级元素，不能是子元素（:checked无法向上选父级） - 别依赖
:checked:disabled做禁用态，部分浏览器不支持该组合伪类
为什么 ~ 比 + 更常用
因为 + 只能选紧邻的下一个兄弟元素，而 ~ 可以选后面所有符合条件的兄弟元素。实际写开关时，HTML 结构常是：input → 文字 → span.switch-track → span.switch-thumb，中间夹了其他节点，+ 就断链了。
示例结构：
<label> <input type="checkbox" class="switch-input"><span class="switch-track"></span> <span class="switch-thumb"></span> </label>
这时必须用 .switch-input:checked ~ .switch-thumb 才能命中滑块；用 + 会完全失效。
- 如果滑块紧跟在
input后面且中间无其他元素，+可用，但容错性差 -
~兼容性更好（IE9+），且更贴合真实 DOM 排布习惯 - 别试图用
:has()反向控制父容器——目前仅 Chrome 105+ 支持，移动端几乎不可用
如何让开关有过渡动画但又不卡顿
只对 transform 和 opacity 做 transition，其它属性（比如 left、background-color）容易触发重排，尤其在低端安卓机上明显掉帧。
典型写法是给滑块加：
.switch-thumb {
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch-input:checked ~ .switch-thumb {
transform: translateX(24px); /* 假设 track 宽 48px，thumb 宽 24px */
}
- 数值用
px或rem，别用百分比——计算依赖父容器宽度，容易在 flex/grid 布局中偏移 - 过渡时间别超过 0.3s，否则用户会觉得“慢”；也别低于 0.1s，否则像没动
- 移动端记得加
-webkit-appearance: none到input，否则 iOS 会强加默认样式干扰布局
移动端点击区域太小导致误操作怎么办
原生 input 点击热区只有几个像素，必须扩大可点击范围。最稳妥方式是把 label 设为块级、加内边距，并确保它包裹 input。
别只靠 input { width: 0; height: 0; } 隐藏——这会让可访问性（a11y）和点击区域同时归零。
-
label设置display: block+padding: 12px，既扩大热区又不影响视觉 - 避免用
pointer-events: none在input上，会导致整个控件失焦、无法键盘操作 - 真需要隐藏
input，用position: absolute; opacity: 0; width: 1px; height: 1px;，保留语义和焦点能力
CSS 开关看着简单，真正上线时最容易翻车的是 Safari 的 :checked 响应延迟、Android WebView 的过渡卡顿，还有无障碍检测工具报出的「缺少 label 关联」。这些点不提前压住，上线后修起来比重写还麻烦。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
