:focus 表示元素获得焦点，常用于输入框高亮和表单验证，支持键盘导航；:active 表示元素被激活，如鼠标按下时的瞬时状态，多用于按钮点击反馈。两者结合可提升交互体验与可访问性，建议保留或自定义 outline，避免仅依赖颜色变化，并确保移动端响应及时，自定义组件需添加 tabindex 以支持聚焦。
在网页交互中，按钮、链接等可操作元素经常需要根据用户的行为改变外观。CSS 提供了 :active 和 :focus 伪类来响应用户的操作状态，合理使用它们可以显著提升用户体验。
理解 :focus 伪类
:focus 表示一个元素获得了焦点，通常发生在用户通过键盘（如 Tab 键）或鼠标点击输入框、按钮等可聚焦元素时。
常见应用场景包括：
- 输入框获取焦点时高亮边框
- 表单验证时标记出错字段
- 提升键盘导航的可访问性
input:focus {
border-color: #007BFF;
outline: 2px solid #007BFF;
}
注意：浏览器默认会给聚焦元素添加轮廓（outline），出于可访问性考虑，不建议完全移除，若需自定义样式，应提供替代视觉反馈。
理解 :active 伪类
:active 表示元素正被激活，比如鼠标按下但尚未释放，或触摸屏上手指按住时的状态。
它适用于任何元素，但在按钮和链接中最常见。
示例：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 的行为特点，能让你的界面更直观、更友好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
