css :active 和 :focus 区别_交互状态样式说明

:active 是点击瞬间触发的瞬时伪类，仅在鼠标按下到松开期间生效，不保留状态、无法键盘触发、不适用于非交互元素；:focus 是持续焦点状态，需显式获取且可持久存在。

点击瞬间触发的是 :active，不是 :focus

:active 只在鼠标按下（或触摸开始）到松开的极短时间内生效，和是否获得焦点无关。它不保留状态，松手即失效。常见于按钮按压反馈，比如让按钮背景变深一点。

容易误以为点击后还“保持 active”——其实不会。如果想维持类似效果，得用 JS 切换 class，或者改用 :focus 配合 tabindex。

• :active 无法通过键盘触发（除非是带 tabindex 的元素且用户用空格/回车激活）
• 移动端上，:active 在 touchstart 后立即触发，但部分 Android 浏览器有 300ms 延迟，需加 touch-action: manipulation 优化
• 不能用在
  等非交互元素上实现“长按高亮”，因为默认不响应点击事件

  :focus 是键盘导航或显式聚焦后的持续状态

  :focus 表示元素当前拥有输入焦点，通常由 Tab 键、click()、focus() 方法或表单控件自动获得。它会一直存在，直到焦点离开（比如点别的地方或按 Shift+Tab）。

  注意：普通

  默认不可聚焦，要加 tabindex="0" 才能被键盘访问并响应 :focus。

  立即学习“前端免费学习笔记（深入）”；

  • 表单元素（、、）天然支持 :focus
  • :focus 样式常用于可访问性设计，比如显示清晰的焦点轮廓（别直接 outline: none 除非提供替代样式）
  • Chrome/Firefox 默认只对键盘触发的聚焦应用 :focus 样式（:focus-visible 更精准，但兼容性稍弱）

  同时设置 :active 和 :focus 时要注意层叠顺序

  CSS 伪类没有优先级差异，生效取决于规则书写顺序。如果两个规则选择器权重相同，后写的会覆盖先写的。

  典型错误是把 :focus 写在 :active 前面，结果点击时看不到按压效果——因为松手后焦点还在，:focus 样式盖住了 :active 的临时变化。

  

  知识吐司

  专注K12教育的AI知识漫画生成工具

  下载

  button:active {
    background-color: #2c3e50;
  }
  button:focus {
    outline: 2px solid #3498db;
  }

  上面写法没问题；但如果写成：

  button:focus {
    outline: 2px solid #3498db;
  }
  button:active {
    background-color: #2c3e50;
  }

  那点击时背景色会生效，但松手后焦点轮廓保留，视觉上可能掩盖了你为 :active 设计的反馈意图。

  移动端真机测试时 :active 经常不生效

  很多 iOS/Android 浏览器默认禁用非可点击元素的 :active，尤其当元素没声明 cursor: pointer 或没绑定 click 事件时。

  • 给元素加 cursor: pointer 能提高 iOS Safari 触发 :active 的概率
  • 更可靠的方式是监听 touchstart 和 touchend，动态添加/移除 class
  • 避免依赖 :active 实现核心交互反馈，比如“按钮已按下”的状态确认——应该用 JS 控制

  复杂点在于：:active 是瞬时、被动、不可编程的；:focus 是持久、可预测、可主动控制的。别指望靠一个伪类解决所有交互反馈需求。