纯CSS开关需将checkbox置于目标元素前，用:checked+或~选择器控制显隐；label须正确绑定input；移动端需确保input可点击且z-index足够；JS操作应直接修改checked属性而非setAttribute。
怎么用 :checked 控制显隐而不写 JS
纯 CSS 实现开关控制，核心是把 <input type="checkbox"> 隐藏，再用相邻/子元素选择器联动其他元素。关键不是“怎么隐藏”，而是“怎么精准选中后续元素”——:checked 只能影响它之后的兄弟或后代，不能反向操作。
常见错误：把 <input> 放在要控制的 <div> 后面，结果样式完全不生效；或者用了 ~（通用兄弟）却忘了它们必须同级且有共同父容器。
- 必须把
<input>放在目标元素前面（同级），才能用+（紧邻兄弟）或~（后续兄弟）选中 - 如果目标是子元素（比如开关按钮+折叠内容），把
<input>包进同一个父容器，用:checked > .content或:checked ~ .content - 别用
display: none隐藏复选框——它会让:checked伪类失效；改用position: absolute; left: -9999px或opacity: 0; width: 0; height: 0
:checked + label 点击区域怎么扩大
用户实际点击的是 <label>，不是看不见的复选框。但很多人只给 <label> 加样式，忘了 for 属性或包裹关系没配对，导致点击无效。
使用场景很典型：一个自定义开关滑块，点击整个区域都要触发切换。这时候 <label> 必须正确绑定到 <input>，否则 :checked 永远不会变。
立即学习“前端免费学习笔记（深入）”；
- 推荐用包裹写法：
<label><input type="checkbox"> 开关</label>，不用for也能工作 - 如果用
for，确保<input id="toggle">和<label for="toggle">的id/for值严格一致（大小写敏感） - 想让 label 内容可选中文字？加
user-select: none，不然双击可能选中文字打断交互
移动端 :checked 失效的三个真实原因
PC 上好好的开关，到 iOS 或安卓微信里点不动，大概率不是 CSS 问题，而是浏览器对隐藏复选框的点击策略收紧了。
错误现象包括：第一次点击无反应、需要点两次、滑动后状态错乱。根本原因是某些 WebView 把 opacity: 0 或 visibility: hidden 的 <input> 当作不可交互元素跳过事件分发。
- 把
<input>的z-index设为 1，再用position: relative确保它在 label 上层（哪怕透明） - 加
pointer-events: auto到<input>上——有些浏览器默认设为none以优化性能 - 避免用
transform: scale(0)隐藏，iOS Safari 会彻底忽略该元素的点击区域
和 JS 混用时，:checked 样式为什么没更新
直接用 JS 改 input.checked = true，CSS :checked 通常能响应；但如果 JS 是通过 setAttribute('checked', '') 或操作 DOM 属性字符串，就可能失败——因为 :checked 读的是属性（property），不是特性（attribute）。
更隐蔽的问题是：JS 设置完状态后立即读 offsetHeight 或触发布局，而 CSS 还没完成重绘，导致判断逻辑出错。
- 永远用
el.checked = true/false，而不是el.setAttribute('checked', ...) - 如果要等样式生效后再执行后续逻辑，用
getComputedStyle(el).display或requestAnimationFrame延迟到下一帧 - 不要在 JS 里反复切换
checked来“触发动画”——:checked不是动画钩子，真要动效得靠transition配合 class 切换
