:checked是纯CSS选择器，无需JS即可响应复选框或单选框的checked property变化；它依赖用户点击或el.checked=true触发，不响应setAttribute；须配合+或~选择器控制同级兄弟元素，并用max-height等可过渡属性实现动画。
:checked 本身不是交互逻辑，它只是 CSS 选择器——只要复选框或单选框真实处于选中状态，样式就立即生效。不需要 JS 监听、不需要 addEventListener，也不需要手动 toggle class。
为什么:checked能直接响应用户点击
浏览器原生支持 input[type="checkbox"] 和 input[type="radio"] 的点击切换行为，这个操作会同步更新 DOM 中的 checked property（注意不是 attribute）。CSS 的 :checked 伪类监听的是 property 状态，所以样式更新是即时、零延迟的。
- ✅ 正确触发方式：用户点击
<label for="id">或直接点 checkbox；或 JS 执行el.checked = true - ❌ 无效触发方式：JS 调用
el.setAttribute('checked', 'checked')—— 这只影响初始渲染，后续无法同步状态 - ⚠️ 注意：
form.reset()会清空所有表单控件状态，:checked效果随之消失
:checked + 兄弟选择器的结构限制
想用 :checked 控制其他元素，必须满足 DOM 位置关系。CSS 无法跨层级“查找”，只能靠 +（相邻兄弟）或 ~（通用兄弟）向后匹配同级元素。
-
input:checked + .panel：要求.panel必须紧跟在input后面，中间不能有其他标签 -
input:checked ~ .panel：允许中间有其他同级元素，但.panel仍需与input同父、且在其之后 - ❌ 错误结构：
<label><input><div class="panel"></div></label>—— 此时div是input的子元素，不是兄弟，+或~都不匹配 - ✅ 可行结构：
<input id="toggle"><label for="toggle">开关</label><div class="panel"></div>
如何让折叠内容平滑展开动画
display: none/block 不能加 transition，必须换用可过渡属性。最常用的是 max-height，但写法有讲究。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 用
max-height: 0→max-height: 500px（设一个足够覆盖内容的高度），配合overflow: hidden - 不能写
max-height: 0→max-height: auto，因为auto无法参与 CSS 过渡计算 - 动画加在被控制的元素上，例如：
.panel { transition: max-height 0.3s ease, opacity 0.2s ease; } - Safari 偶尔对
max-height过渡有渲染延迟，可加will-change: max-height缓解
常见误用和可访问性陷阱
纯 CSS 方案容易忽略键盘操作和屏幕阅读器支持，导致功能对部分用户不可用。
- 仅依赖
:hover或隐藏 checkbox 不提供 focus 样式，会切断键盘用户的操作路径 - 必须保留
outline或提供等效视觉反馈，否则Tab切换时无法识别焦点位置 - 用
label包裹input或使用for属性，确保点击文字也能触发状态切换 -
:checked无法读取当前值、不能做异步校验、也不能监听事件——这些仍需后端兜底或必要时引入 JS
真正难的不是写出 :checked ~ .content，而是把 HTML 结构、focus 管理、过渡边界和可访问性全部对齐。一旦漏掉其中一环，看似能动的效果就会在真实使用中卡住。
