如何在CSS中利用:checked伪类实现纯样式折叠面板-css教程-PHP中文网

:checked伪类能控制折叠面板显隐，因其可监听checkbox/radio的布尔状态并联动兄弟/子元素样式，无需JS即可实现状态驱动的显隐切换。

如何在css中利用:checked伪类实现纯样式折叠面板

为什么:checked伪类能控制折叠面板的显隐

:checked 本质是监听 <input type="checkbox"> 或 <input type="radio"> 的选中状态，它本身不触发 JS，但能联动后续的兄弟/子元素样式。折叠面板的核心逻辑就是「状态驱动显隐」，而 CSS 中唯一能响应用户交互并产生布尔状态的原生伪类就是 :checked —— 它不需要任何 JS 就能完成开/关切换。

关键前提：必须用 <input> 作为状态源，并通过 ~（通用兄弟选择器）或 +（相邻兄弟选择器）定位到目标内容区。不能用 <div> 或 <code><button></button> 直接加 :checked，它们不支持该伪类。

HTML 结构必须满足的三个硬性条件

结构错一点，:checked 就完全失效。常见失败根本不是 CSS 写错，而是 HTML 层级没对齐：

<input> 必须在目标 <div class="panel-content"> 的前面（同级或父级内），且中间不能隔开其他非兄弟元素 <li>如果用 <code>+ 选择器，<input> 和内容区必须是**紧邻的兄弟元素**；如果用 ~，可以隔开其他兄弟元素（比如加个标题 <h3></h3>）
<label></label> 必须绑定 for 属性（值为 <input> 的 id），或把 <input> 包在 <label></label> 内——否则点击无响应

正确最小结构示例：

立即学习“前端免费学习笔记（深入）”；

<input type="checkbox" id="panel-1" hidden>
<label for="panel-1">点击展开</label>
<div class="panel-content">这里是内容</div>

注意：hidden 属性只是隐藏输入框，不影响状态监听；用 display: none 也行，但别用 visibility: hidden（仍占位，可能影响布局）。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

CSS 中控制显隐的关键写法和陷阱

核心是利用 :checked 改变后续元素的 max-height、opacity 或 height，但直接设 height: 0 → height: auto 不会触发过渡动画，所以必须用 max-height 配合固定上限值。

内容区默认设 max-height: 0、overflow: hidden，再加 transition: max-height 0.3s ease-in-out
input:checked ~ .panel-content 中设 max-height: 500px（值要大于内容实际高度，太小会截断）
不要用 display: none/block 切换——它无法过渡；也不要依赖 height: auto 做过渡目标值（CSS 不支持 auto 过渡）
若内容高度差异大，可为不同面板设不同 max-height，比如 .panel-1 .panel-content 设 max-height: 200px，.panel-2 设 max-height: 400px

简易 CSS 示例：

.panel-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
#panel-1:checked ~ .panel-content {
  max-height: 300px;
}