CSS :focus-visible 智能聚焦

CSS :focus-visible伪类：仅键盘导航时显示聚焦环（鼠标点击不显示）、与:focus的区别、提升无障碍体验、自定义聚焦样式 · 难度：入门 · +10XP

CSS :focus-visible —— 智能焦点环

:focus会给所有获得焦点的元素加焦点环——包括鼠标点击。但鼠标点击时并不需要焦点环（视觉干扰），只有键盘Tab导航时才需要。:focus-visible就是解决这个的。

对比

/* 不好：鼠标点击也有焦点环 */
button:focus { outline: 2px solid blue; }
/* 好：只有键盘导航时才显示焦点环 */
button:focus-visible { outline: 2px solid blue; }

全局优化

:focus:not(:focus-visible) { outline: none; }  /* 鼠标点击去掉焦点环 */
:focus-visible { outline: 2px solid #4CAF50; outline-offset: 2px; }

动手练习

1. 基础练习：把项目中所有:focus替换为:focus-visible。
2. 进阶应用：用focus-visible做一套完整的键盘导航样式——链接、按钮、输入框各不相同。
3. 项目实战：用浏览器DevTools的"Rendering → Emulate a focused page"测试键盘焦点环效果。