17370845950

:focus 在元素获得焦点时生效，常用于表单高亮；:active 在元素被激活瞬间触发，用于模拟按下效果；前者持续至失焦，后者仅在按下时存在。

:focus 和 :active 是 CSS 中两个常用的伪类，它们都用于描述元素的特定状态，但触发条件和使用场景不同。

:focus 伪类

当一个元素获得焦点时，:focus 生效。这通常发生在以下情况：

• 用户通过 Tab 键切换到输入框、按钮等可交互元素
• 用户点击输入框或使用 JavaScript 调用 .focus() 方法

常见用途包括高亮当前正在输入的表单字段：

:active 伪类

:active 在元素被激活（例如鼠标按下但尚未释放）时生效。它反映的是“正在操作”的瞬间状态。

• 鼠标左键点击按钮但未松开
• 触摸屏上手指按下但未抬起

常用于模拟按钮按下效果：

关键区别

两者的核心差异在于触发机制：

• :focus 表示元素“被选中”并准备接收输入，状态持续直到失去焦点（如点击其他地方）
• :active 是瞬时状态，仅在用户按下鼠标或触摸期间存在，松开即消失

并非所有元素都能触发 :focus，只有可交互元素（如表单控件、带 tabindex 的元素）才支持。而 :active 几乎可用于任何可见元素，包括链接和 div。

基本上就这些。合理使用这两个伪类能显著提升界面的交互反馈体验。