CSS伪类:checked实战_利用复选框状态控制页面布局开关

: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、空格切换、触屏点击、屏幕阅读器朗读）都走通。伪类开关看着轻量，但一碰无障碍，很多细节就露馅了。