:checked配合+或~实现交互需满足HTML结构和状态触发双条件；+要求.target紧邻input后无任何节点，~则匹配同级所有.target；隐藏input须避免display:none，改用绝对定位等；动画应加在替身元素上且显式声明transition。
:checked 配合 + 或 ~ 能做开关、展开收起、单选切换面板这三类交互，但必须满足 HTML 结构和状态触发两个硬条件，否则样式完全不生效。
为什么:checked + .target有时没反应
根本原因不是 CSS 写错了，而是 DOM 结构断了链路。+ 要求 .target 必须紧挨在 <input type="checkbox"> 后面，中间不能有任何节点——包括换行符、空格、注释甚至文本节点。
- 写成
<input><div class="target">…</div>才安全；<input>\n<div class="target">就失效 - 用
:checked ~ .target更稳妥：它匹配所有后续同级的.target，不管中间隔了多少元素 - 两者都要求 input 和 target 在同一父容器内，跨父级直接不匹配
- 如果目标元素是
<label>，确保它不是<input>的子元素（HTML 禁止），否则:checked > label永远无效
隐藏复选框时最容易踩的坑
display: none 是最常见也最致命的错误——它会让浏览器彻底忽略该元素的交互状态，:checked 伪类再也不会被触发。
- 正确做法是用
position: absolute; opacity: 0; width: 0; height: 0;或position: absolute; left: -9999px; - 必须保留
tabindex或确保<label for="id">绑定正确，否则键盘用户无法操作 - 移动端要加
touch-action: manipulation，某些安卓 WebView 对opacity: 0的点击支持不稳定 - 千万别在
<input>上设pointer-events: none，否则点击直接穿透，状态根本不变
动画效果该加在哪儿、怎么加才有效
:checked 本身没有视觉属性可动画，transition 必须落在能动的替身元素上，比如滑块、背景层或内容容器。
立即学习“前端免费学习笔记（深入）”；
- 动画加在
.slider上，而不是input:checked——后者没有left、transform等可过渡属性 - 推荐用
transform: translateX()，比left或margin-left更高效，不触发重排 - 必须显式声明
transition: transform 0.2s ease，否则变化是瞬时的 - 初始态设
transform: translateX(0)，选中态设transform: translateX(100%)或具体像素值
真正难的不是写出那几行 CSS，而是理解 :checked 只响应真实用户点击触发的状态变更——JS 直接赋值 el.checked = true 不会激活它，除非再调一次 el.click()。结构、绑定、隐藏方式，三者缺一不可。
