CSS focus-visible 与 focus-within：焦点可见性与交互无障碍

概述`:focus-visible` 在键盘或辅助技术触发的聚焦时显示焦点样式，避免鼠标点击产生不必要的轮廓。`:focus-within` 用于当子元素获得焦点时高亮父容器，提升表单与组合组件体验。用法/示例button { outline: none } button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px } .field:focus-within { box-shadow: 0 0 0 2px #93c5fd } 工程建议保持清晰可见的焦点样式，遵守对比度与可访问性要求；避免完全移除焦点。在复杂组件上使用 `:focus-within` 联动高亮容器，帮助用户定位输入区域。对不支持环境使用 `:focus` 作为回退，并测试键盘导航路径。参考与验证MDN：`:focus-visible` — https://developer.mozilla.org/docs/Web/CSS/:focus-visibleMDN：`:focus-within` — https://developer.mozilla.org/docs/Web/CSS/:focus-within