:target 能控制手风琴展开收缩，因其匹配 url 片段标识符指向的元素，点击 href="#id" 链接时该 id 元素成为 :target，触发 css 样式变化；配合 max-height 过渡实现动画，但仅支持单选、无法点击收起已展开项。
为什么 :target 能控制手风琴展开收缩
:target 匹配 URL 中片段标识符（即 #xxx）所指向的元素。当用户点击带 href="#section1" 的链接时，浏览器滚动并高亮 id="section1" 的元素，同时该元素成为 :target——这提供了无需 JS 的“状态切换”信号。
关键点在于：它只依赖 URL 变化，天然支持前进/后退、书签直连、SEO 友好；但缺点是每次只能有一个激活项（单选），且无法默认关闭所有（需配合初始 URL 设计）。
常见错误现象：:target 不生效，往往因为目标元素缺失 id，或 id 与 href 值大小写/符号不一致（如 href="#faq-1" 对应 id="faq1" 就失败）。
HTML 结构必须满足的两个硬性条件
手风琴的 DOM 结构直接影响 :target 是否能联动内容区域。不能用 <details><summary></summary></details> 混用，也不能把标题和内容拆到不同父容器里。
- 每个可折叠项必须是一个独立的、有
id的块级容器（如<section id="item1"></section>） - 标题链接的
href必须精确指向该容器的id，例如@#@#@#@#@#@#@#@#@#@0 - 内容区域必须是该容器的子元素（否则
:target .content选择器无效）
典型结构示例：
<section id="q1"><a href="#q1" class="accordion-trigger">Q: 什么是 CSS？</a> <div class="accordion-content">A: 层叠样式表...</div> </section>
:target 配合 max-height 实现平滑过渡
纯 :target 只能触发样式变化，要实现“展开/收起动画”，得靠 max-height + transition。不能用 height: auto（CSS 动画不支持），所以需要预估最大高度。
实操建议：
- 给内容区设初始
max-height: 0和overflow: hidden - 在
:target .accordion-content中设一个足够大的max-height（如500px），确保所有内容都能撑开 - 添加
transition: max-height 0.3s ease-in-out到内容区本身（不是:target规则里） - 若内容高度差异极大，可为不同项设不同
max-height（如#q1:target .content { max-height: 200px; }）
注意：IE 不支持 :target，如需兼容，得降级为 JS 方案；另外 Safari 在某些版本中对 max-height 过渡有渲染延迟，可加 will-change: max-height 缓解。
如何让菜单默认全部收起，且首次访问不自动展开
URL 带 #q1 时，#q1 元素会立即成为 :target，导致首次加载就展开——这不是所有场景想要的。解决思路是“切断初始匹配”。
方法很简单：
- 确保首页 URL 不含任何 fragment（即不以
#结尾） - 所有触发链接都用
href="#q1"，但不要在页面加载前手动设置location.hash - 如果必须默认展开某一项，用
<section id="q1" class="default-open"></section>+ CSS.default-open .accordion-content { max-height: 500px; }单独控制，绕过:target
容易被忽略的一点：点击已展开项的标题，URL 会再次变成 #q1，但浏览器不会触发新导航，:target 状态也不会刷新——这意味着你无法用 :target 实现“点击已展开项即收起”。这是该方案的固有限制，必须接受或补充极简 JS 来补全交互。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
