:focus-within 未触发是因焦点未真正落在可聚焦子元素上；需确保 input/textarea/select 或 tabindex="0" 元素获焦，且无 pointer-events: none、disabled 等阻断，label 与控件须为真实后代关系。
为什么 .form-group:focus-within 在屏幕阅读器下没反应？
不是伪类失效，而是焦点没真正落到可聚焦子元素上——tabindex="-1"只是让父容器“可参与焦点流”，不等于它自己会获得焦点；真正的触发源必须是 <input>、<textarea></textarea>、<select></select> 或显式带 tabindex="0" 的元素。如果子元素被 pointer-events: none、disabled 或 display: contents 隔断，:focus-within 就不会激活。
- 检查 DevTools 的 Elements 面板：点击输入框后，确认焦点确实落在
<input>上（高亮边框 + “:focus” 标签），而不是卡在父层 - 避免用
visibility: hidden或opacity: 0隐藏表单控件——它们仍可聚焦但不可见，会破坏屏幕阅读器逻辑 -
<label></label>和<input>必须构成真实祖先-后代关系（如<label><input></label>），否则点击 label 不会触发 input 聚焦，:focus-within也就不会响应
如何用 :focus-within 做键盘友好的视觉反馈？
仅靠 outline: none 清除默认焦点环会直接切断键盘用户的焦点路径。正确做法是用 :focus-within 统一控制容器级反馈，并保留或迁移焦点指示到更安全的位置。
- 优先使用
outline: 2px solid #007bff+outline-offset: 2px，不占布局空间，且对屏幕阅读器和键盘导航完全友好 - 不要在
:focus-within规则里改height、margin或display——这些会引发重排，干扰辅助技术的 DOM 读取顺序 - 若需高亮 label 或提示文字，直接写
.form-group:focus-within label，确保语义标签与控件同步变化，屏幕阅读器能感知状态联动
为什么 iOS Safari 15.4 之前不支持 :focus-within？
因为 Safari 直到 15.4（2022 年中）才完成对 :focus-within 的完整实现。旧版会完全忽略该伪类，导致表单容器无任何聚焦反馈——这不是 CSS 写错，而是浏览器能力缺失。
- 检测方法：在 iOS 15.3 设备上打开页面，手动 Tab 进入输入框，观察容器样式是否变化；DevTools 里也看不到匹配的
:focus-within规则 - 兼容 fallback 推荐用
focusin/focusout事件监听，给父容器加/删focusedclass，避免用focus/blur（不冒泡） - 别用
:has()替代——它在 Safari 15.4 同样不支持，且性能开销更大
如何避免 :focus-within 误触发提交按钮？
给整个 <form></form> 加 :focus-within 是最常见翻车点：用户点击 <button type="submit"></button> 时，按钮自身获焦，导致整个表单容器高亮，视觉上像“正在编辑”而非“准备提交”。
- 只作用于明确的输入容器，如
.form-group、.input-wrapper、.form-floating，避开<form></form>、<fieldset></fieldset>这类宽泛语义容器 - 若用 Bootstrap，优先采用
.form-floating—— 它内部已处理好 label 浮动与焦点联动，无需额外加tabindex="-1" - 测试时务必用键盘 Tab 导航走一遍：从第一个输入框 → 最后一个输入框 → 提交按钮，确认只有输入区域响应，按钮点击不引发容器样式变化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
