: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"></label> 或直接点 checkbox；或 JS 执行 el.checked = true
• ❌ 无效触发方式：JS 调用 el.setAttribute('checked', 'checked') —— 这只影响初始渲染，后续无法同步状态
• ⚠️ 注意：form.reset() 会清空所有表单控件状态，:checked 效果随之消失

:checked + 兄弟选择器的结构限制

想用 :checked 控制其他元素，必须满足 DOM 位置关系。CSS 无法跨层级“查找”，只能靠 +（相邻兄弟）或 ~（通用兄弟）向后匹配同级元素。

deep-java-review

Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...

下载

• 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，但写法有讲究。

• 用 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 管理、过渡边界和可访问性全部对齐。一旦漏掉其中一环，看似能动的效果就会在真实使用中卡住。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南