- A+
所属分类：教程文章
在网页交互中，按钮、链接等可操作元素经常需要根据用户的行为改变外观。CSS 提供了 :active 和 :focus 伪类来响应用户的操作状态，合理使用它们可以显著提升用户体验。
理解 :focus 伪类
:focus 表示一个元素获得了焦点，通常发生在用户通过键盘（如 Tab 键）或鼠标点击输入框、按钮等可聚焦元素时。
常见应用场景包括：
- 输入框获取焦点时高亮边框
- 表单验证时标记出错字段
- 提升键盘导航的可访问性
示例：
input:focus {
border-color: #007BFF;
outline: 2px solid #007BFF;
}
注意：浏览器默认会给聚焦元素添加轮廓（outline），出于可访问性考虑，不建议完全移除，若需自定义样式，应提供替代视觉反馈。
立即学习“前端免费学习笔记（深入）”；
理解 :active 伪类
:active 表示元素正被激活，比如鼠标按下但尚未释放，或触摸屏上手指按住时的状态。
它适用于任何元素，但在按钮和链接中最常见。
360智图
143
AI驱动的图片版权查询平台
143
查看详情
示例：
button:active {
background-color: #0056b3;
transform: translateY(1px);
}
这个状态是瞬时的，松开鼠标后立即消失。可用于模拟“按下”效果，增强点击反馈。
:focus 与 :active 的区别与配合
两者触发条件不同：
- :focus 更持久，直到元素失去焦点
- :active 是临时状态，仅在激活过程中存在
在实际开发中，常结合使用以覆盖多种交互场景：
a:focus {
outline: 2px dotted #000;
}
a:active {
color: red;
}
这样既支持键盘导航（focus），也提供点击反馈（active）。
实用建议与注意事项
为确保良好的用户体验和可访问性，请注意以下几点：
- 避免仅用颜色变化表示 focus 状态，色盲用户可能难以识别
- 不要全局禁用 outline，可通过自定义样式优化其表现
- 移动端要注意 :active 的触发时机，有时需要额外处理以确保响应及时
- 对于自定义组件（如 div 模拟按钮），需设置 tabindex 才能获得 focus 状态
基本上就这些，掌握 :focus 和 :active 的行为特点，能让你的界面更直观、更友好。
