:focus 在元素获得焦点时生效，常用于表单高亮；:active 在元素被激活瞬间触发，用于模拟按下效果；前者持续至失焦，后者仅在按下时存在。
:focus 和 :active 是 CSS 中两个常用的伪类，它们都用于描述元素的特定状态，但触发条件和使用场景不同。
:focus 伪类
当一个元素获得焦点时，:focus 生效。这通常发生在以下情况：
- 用户通过 Tab 键切换到输入框、按钮等可交互元素
- 用户点击输入框或使用 JavaScript 调用 .focus() 方法
常见用途包括高亮当前正在输入的表单字段：
input:focus {border-color: #007acc;
outline: 2px solid #007acc;
}
:active 伪类
:active 在元素被激活（例如鼠标按下但尚未释放）时生效。它反映的是“正在操作”的瞬间状态。
立即学习“前端免费学习笔记（深入）”；
- 鼠标左键点击按钮但未松开
- 触摸屏上手指按下但未抬起
常用于模拟按钮按下效果：
button:active {background-color: #005a9e;
transform: translateY(1px);
}
关键区别
两者的核心差异在于触发机制：
- :focus 表示元素“被选中”并准备接收输入，状态持续直到失去焦点（如点击其他地方）
- :active 是瞬时状态，仅在用户按下鼠标或触摸期间存在，松开即消失
并非所有元素都能触发 :focus，只有可交互元素（如表单控件、带 tabindex 的元素）才支持。而 :active 几乎可用于任何可见元素，包括链接和 div。
基本上就这些。合理使用这两个伪类能显著提升界面的交互反馈体验。
