:focus-within无法实现点击后持续状态，因其仅依赖实时焦点，焦点丢失即失效；需配合可聚焦元素与js控制，或改用:checked伪类实现纯css切换。
为什么 :focus-within 不能直接实现点击后“持续”状态
:focus-within 是一个伪类，它只在元素自身或其任意后代获得焦点（focus）时生效，比如用户用 Tab 键导航、点击可聚焦元素（input、button、带 tabindex 的 div）时触发。它不是“点击切换开关”，也不保存状态——一旦焦点离开整个容器，样式就立刻消失。
常见误解是以为点击一次就能让 :focus-within “锁住”状态，但实际它完全依赖原生焦点流，无法脱离交互上下文持久化。
- 点击一个无焦点能力的
div，不会触发:focus-within - 点击后按 Esc 或点空白处，焦点丢失，状态立即重置
- 移动端触摸后焦点行为不稳定，部分浏览器不自动聚焦非表单元素
想用 :focus-within 模拟点击切换？必须配合可聚焦元素
要让 :focus-within 可控，得把“点击目标”变成能获取焦点的元素，并控制焦点进出时机。最稳妥的方式是用 button 或带 tabindex="0" 的容器，再配合 JS 切换焦点来“维持”状态。
例如：点击一个卡片标题展开内容，希望再次点击收起——这时不能只靠 CSS，但可以用 :focus-within 配合最小 JS 干预：
<div class="card" tabindex="0"> <h3 class="card-title">标题</h3> <div class="card-content">内容区</div> </div>
对应 CSS：
.card .card-content { max-height: 0; overflow: hidden; opacity: 0; }
.card:focus-within .card-content {
max-height: 500px;
opacity: 1;
transition: opacity 0.2s, max-height 0.3s ease-out;
}
- 必须设
tabindex="0"，否则div无法被 JS.focus()或键盘聚焦 - 首次点击后，
div获得焦点 → 触发:focus-within→ 展开内容 - 再次点击同一元素，焦点仍在，状态不变；需额外 JS 监听点击并手动 blur/relight 来翻转
- 若用
button替代div，语义更正确，且默认可聚焦，无需tabindex
:focus-within 和 :checked + 隐藏 checkbox 的方案对比
如果目标只是“点击切换显隐”，比 :focus-within 更可靠、纯 CSS 的方案是用 :checked 配合隐藏的 input[type="checkbox"]。它天然支持 toggle，且状态独立于焦点生命周期。
<input type="checkbox" id="toggle"><label for="toggle" class="toggle-trigger">点击切换</label>
<div class="toggle-content">内容</div>
#toggle:checked ~ .toggle-content { opacity: 1; max-height: 200px; }
-
:checked状态由用户点击直接控制，不会因失焦而丢失 - 无需 JS，兼容性更好（IE9+），适合静态页面或 CMS 输出
- 缺点：需要一个不可见的
input，DOM 结构略冗余；无法响应键盘空格/回车切换（除非加 JS） -
:focus-within在表单嵌套场景（如整个form获取焦点时高亮所有子字段）更有优势，但不适合通用 toggle
移动端和无障碍使用 :focus-within 的实际限制
在 iOS Safari 和部分安卓 WebView 中，:focus-within 对触摸操作的支持较弱：点击后不一定触发 focus，尤其对非表单元素。同时，屏幕阅读器（如 VoiceOver）可能不会将 tabindex="0" 的 div 当作可交互控件播报，影响可访问性。
- 测试发现：iOS 上点击
div[tabindex="0"]后，:focus-within常不生效，需额外onclick="this.focus()" - WCAG 要求可切换控件必须有明确角色（如
role="button"）和键盘支持（Enter/Space），纯:focus-within无法满足 - 如果项目需支持键盘操作或读屏，优先用
button+ JS 控制 class，而非押注:focus-within的自动行为
真正可靠的点击切换状态，终究绕不开一个可控的状态载体——要么是 :checked，要么是 JS 维护的 class。把 :focus-within 当作“辅助高亮”可以，当成“状态引擎”容易掉坑里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
