:checked伪类能替代javascript控制折叠状态，因其直接监听checkbox选中状态并触发浏览器重绘，通过兄弟选择器控制后续元素的max-height、opacity等可过渡属性实现无js折叠效果，轻量且无障碍友好。

为什么:checked伪类能替代JavaScript控制折叠状态 :checked 本质是监听 <input type="checkbox"> 的选中状态，而 checkbox 的状态变化会触发浏览器重绘。只要把 checkbox 和面板内容用 HTML 结构关联（比如兄弟或父子），再用 CSS 控制其后继元素的 display、max-height 或 opacity，就能实现无 JS 的折叠效果。关键在于：它不依赖事件监听或 DOM 操作，纯靠状态映射样式，所以轻量、可服务端渲染、无障碍友好。

但要注意：必须用 checkbox，radio 不适合多面板独立开关；label 必须正确绑定 for 或包裹 input，否则点击无响应。

HTML结构怎么写才让:checked生效 核心是建立「可控开关」和「目标面板」之间的可选中→可定位关系。最可靠的是「相邻兄弟选择器」+ 或「通用兄弟选择器」~：

• <input type="checkbox" id="panel1"> 必须有唯一 id
• <label for="panel1">标题</label> 或 <label><input>标题</label>，确保点击穿透到 checkbox
• 面板内容（<div class="panel">）必须紧跟在 <code>input 后面，且是它的**下一个兄弟元素**，才能用 input:checked + .panel
• 如果中间插入了 label，就得用 input:checked ~ .panel，但要小心它会匹配所有后续同类元素

错误示例：<div><input></div> <div class="panel"></div> —— 因为 input 和 .panel 不是兄弟，:checked + .panel 失效。

如何用CSS平滑展开/收起动画 :checked 本身不支持过渡，所以不能直接对 display 做 transition（它不可动画）。可行方案只有两个：

• 用 max-height + overflow: hidden：初始设 max-height: 0，checked 时设一个足够大的值（如 max-height: 500px），配合 transition: max-height 0.3s ease。注意：值必须是具体数字，不能用 none 或 fit-content（不触发过渡）
• 用 height + padding + opacity 组合：先设 height: 0; padding: 0; opacity: 0，再用 transition: height 0.25s, padding 0.25s, opacity 0.25s。但需精确知道内容高度，实用性低

推荐第一种。常见坑：max-height 设太小会截断内容；设太大则动画时间变长（即使内容短，也会按最大值过渡）；别忘了加 overflow: hidden，否则内容会溢出。

移动端点击无反应？检查这三件事

移动端常出现点不动、点一次没反应、或者点完立刻回弹——基本不是 CSS 问题，而是 HTML 或交互细节没处理好：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 确保 label 有足够点击热区（至少 44×44px），小图标要包在 label 里或加 padding
• 避免在 label 上写 pointer-events: none 或父容器有 overflow: hidden 裁剪了点击区域
• 某些安卓 WebView 对 label[for] 支持弱，建议改用包裹式写法：<label><input type="checkbox">标题</label>

另外，iOS Safari 有时会因「双击缩放」干扰点击，可在 <meta name="viewport"> 中确认没有禁用 user-scalable 导致误判。

真正麻烦的是嵌套折叠（子面板依赖父面板展开）、键盘焦点管理、以及屏幕阅读器播报逻辑——这些光靠 :checked 做不了，得退回到 JS 方案。纯 CSS 折叠只适合简单、静态、单层的场景。