:active与:focus样式怎么用？
时间：2026-01-18 16:59:34 430浏览 收藏
文章不知道大家是否熟悉？今天我将给大家介绍《:active与:focus样式应用解析》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！
该用 :active 而不是 :focus 时，是指需要表现用户主动按下元素（鼠标/触屏/空格回车）的瞬态反馈，如按钮按下的凹陷感；:focus 则用于持续表示键盘可交互状态。
什么时候该用 :active 而不是 :focus
:active 只在元素被用户**主动按下（鼠标左键按住、触屏触摸并保持、空格/回车触发按钮时的瞬态）** 的那一小段时间内生效，松开就立刻结束；:focus 则表示元素当前处于键盘可交互状态（比如按 TAB 切入、点击后获得焦点、JS 调用 focus()），只要没被其他操作移走焦点，样式就持续存在。
常见误用：给按钮加 :active 模拟“已点击”状态——这是错的，它无法持久；想让按钮点击后保持高亮，得靠 JS 切换 class 或用 :focus 配合 tabindex，但要注意可访问性影响。
- 按钮点击反馈（按下的凹陷感）→ 用
:active - 表单输入框被选中等待输入 → 用
:focus - 导航菜单项键盘操作时的指示 → 用
:focus（推荐同时加:focus-visible避免鼠标用户看到多余轮廓） - 自定义组件需要“激活态”语义（如开关、标签页选中）→ 不该依赖
:active，应使用.is-active类或[aria-pressed="true"]