:focus 在元素获得焦点时生效，常用于表单高亮；:active 在元素被激活瞬间触发，用于模拟按下效果；前者持续至失焦，后者仅在按下时存在。
:focus 和 :active 是 CSS 中两个常用的伪类，它们都用于描述元素的特定状态，但触发条件和使用场景不同。
:focus 伪类
当一个元素获得焦点时，:focus 生效。这通常发生在以下情况：
- 用户通过 Tab 键切换到输入框、按钮等可交互元素
- 用户点击输入框或使用 JavaScript 调用 .focus() 方法
常见用途包括高亮当前正在输入的表单字段：
input:focus {border-color: #007acc;
outline: 2px solid #007acc;
}
:active 伪类
:active 在元素被激活（例如鼠标按下但尚未释放）时生效。它反映的是“正在操作”的瞬间状态。
立即学习“前端免费学习笔记（深入）”；
nitc免费效益型企业网站PHP版3.2 本地体验包
下载
NITC效益型企业网站系统(PHP)产品特色1、企业网站模块：1）网站设计精美：前台页面全部采用DIV+CSS，设计严谨，布局合理，页面精美大气。2）管理操作方便：后台管理界面友好，简单易用，区别于一般CMS系统的复杂与繁琐，功能强大，系统安全，性能稳定。用户使用全自动化控制，功能模块可扩展性强。2、搜索引擎优化： 经众多网络营销专家制定，系统自带搜索引擎基础优化功能，能在最短的时间内提升网站的曝
- 鼠标左键点击按钮但未松开
- 触摸屏上手指按下但未抬起
常用于模拟按钮按下效果：
button:active {background-color: #005a9e;
transform: translateY(1px);
}
关键区别
两者的核心差异在于触发机制：
- :focus 表示元素“被选中”并准备接收输入，状态持续直到失去焦点（如点击其他地方）
- :active 是瞬时状态，仅在用户按下鼠标或触摸期间存在，松开即消失
并非所有元素都能触发 :focus，只有可交互元素（如表单控件、带 tabindex 的元素）才支持。而 :active 几乎可用于任何可见元素，包括链接和 div。
基本上就这些。合理使用这两个伪类能显著提升界面的交互反馈体验。
