:checked 是纯 CSS 选择器，无需 JS 即可控制布局；它响应用户点击或 checkbox.checked = true，但不响应 setAttribute；需配合相邻/兄弟选择器使用，支持 opacity、max-height 等可过渡属性动画。
复选框没绑定事件也能控制布局？:checked 本身不触发 JS
很多人误以为 :checked 需要配合 addEventListener('change') 才能生效，其实它纯属 CSS 选择器，只要 DOM 中复选框真实处于勾选状态，样式就立刻应用——不需要任何 JS 参与。
关键在于：它只响应用户操作或 input.checked = true 这类直接修改属性的行为；用 input.click() 触发也有效，但通过 JS 改 input.setAttribute('checked', '') 在现代浏览器里反而无效（因为 checked 是 property，不是 attribute）。
- ✅ 正确写法：
checkbox.checked = true或用户手动点击 - ❌ 错误写法：
checkbox.setAttribute('checked', 'checked')（仅初始化有效，后续无法同步状态） - ⚠️ 注意：表单重置（
form.reset()）会清空:checked状态，CSS 效果随之消失
为什么 label + input[type="checkbox"] 必须相邻或包裹？
:checked 本身不能跨层级“找兄弟”，它的后续兄弟选择器（如 input:checked + .panel）要求目标元素必须紧跟在 input 后面，中间不能有其他标签隔开。想绕过这个限制，得靠 label 的 for 属性把点击行为透传过去。
- ✅ 推荐结构：用
<label><input type="checkbox"> 开关</label>，点击文字即触发状态切换 - ✅ 或者分离结构：
<input id="nav-toggle" type="checkbox"><label for="nav-toggle">菜单</label><nav class="nav">...</nav>，再用#nav-toggle:checked ~ .nav控制显示 - ⚠️ 坑点：
~是通用兄弟选择器，但.nav必须和input同级且在它之后；如果nav包在另一个div里，:checked ~就失效了
:checked 控制的元素能动画吗？过渡要加在谁身上？
可以动画，但必须加在「被控制的元素」上，且只能对支持 CSS 过渡的属性生效（比如 opacity、transform、max-height），不能直接过渡 display 或 visibility（它们不支持缓动）。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效示例：
.panel { opacity: 0; transition: opacity 0.3s ease; } input:checked ~ .panel { opacity: 1; } - ✅ 高度展开：用
max-height替代height，设一个足够大的值（如max-height: 500px），再配overflow: hidden - ❌ 无效尝试：
input:checked ~ .panel { display: block; transition: display 0.3s; }——display不支持过渡 - ⚠️ 注意：Safari 对
max-height过渡偶尔有渲染延迟，可加will-change: max-height缓解
移动端点击区域太小，怎么安全扩大又不破坏语义？
原生 input[type="checkbox"] 默认尺寸极小，直接放大容易变形或兼容性出问题。最稳妥的方式是隐藏原生控件，用 label 撑开点击区，再通过伪元素重绘 UI。
- ✅ 隐藏原生框：
input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; } - ✅ 自定义样式：
label::before { content: ''; display: inline-block; width: 40px; height: 24px; background: #ddd; border-radius: 12px; } - ✅ 状态反馈：
input:checked + label::before { background: #4CAF50; transform: translateX(16px); } - ⚠️ 坑点：别用
label > input再加label::after做滑块——如果input不在label内部，::after就无法响应:checked状态
真正难的不是写出来，而是确保所有交互路径（键盘 Tab、空格切换、触屏点击、屏幕阅读器朗读）都走通。伪类开关看着轻量，但一碰无障碍，很多细节就露馅了。
