css选择器中的:focus与:active交互效果实现

:focus 在元素获得键盘焦点时生效，:active 仅在鼠标/触控按下到松开的瞬间触发；二者触发时机不同、可共存，且需结合 JS 和 :focus-visible 等方案应对多端兼容性问题。

:focus 和 :active 的触发时机完全不同

很多人以为 :focus 和 :active 是“按下去就同时生效”的，其实不是：:focus 表示元素获得键盘焦点（比如 Tab 切入、input 被点击或调用 .focus()），而 :active 仅在鼠标/触控按下（mousedown / touchstart）到松开（mouseup / touchend）的瞬间生效，持续时间极短，且不依赖焦点状态。

这意味着：

• button:active 在点击时亮一下，哪怕它没 tabindex 或没被聚焦过
• button:focus 在键盘导航抵达时保持高亮，但点击时不一定触发 :active（比如鼠标点太快、系统延迟、或被 preventDefault 干扰）
• 两者可以共存：例如用键盘 Tab 到按钮后，再用鼠标点击——此时同时匹配 :focus:active

如何让按钮点击时既有 :active 反馈又保持 :focus 高亮

默认情况下，点击按钮会触发 :active，但松开后焦点可能丢失（尤其在 `` 上点击后，Chrome/Firefox 默认保留焦点，Safari 有时不会；而 `

` 点击后几乎从不自动获得焦点）。要稳定维持“按下去有压感、松开后仍可继续用键盘操作”，得主动干预。

实操建议：

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

• 确保可交互元素是原生可聚焦标签（button、a、带 tabindex="0" 的 div）
• 用 :focus-visible 替代裸 :focus，避免鼠标点击后意外出现焦点环（现代浏览器支持，旧版可用 focus-visible polyfill）
• 组合写法更可控：

  button:focus:not(:active) {
    outline: 2px solid #007bff;
  }
  button:active {
    transform: scale(0.98);
    background-color: #0056b3;
  }

• 若需“点击后强制保焦”，可在 click 事件中手动调用 .focus()，但注意避免干扰屏幕阅读器的自然流

移动端 touch 设备上的 :active 失效问题

iOS Safari 和部分安卓 WebView 中，:active 样式默认不生效——因为这些浏览器为提升滚动性能，延迟或禁用了对非可点击元素的 :active 响应。这不是 bug，而是优化策略。

ClippingMagic

魔术般地去除图片背景

下载

解决方式有限但明确：

• 给元素添加 cursor: pointer（仅 CSS 层面提示，无实际作用）不行
• 必须加 ontouchstart="" 属性（空事件处理器）或绑定任意 touchstart 监听器，才能激活 :active 的响应能力
• 更稳妥的做法是改用 JavaScript 模拟：

Submit，然后在 JS 中切换临时 class（如 is-pressing）来驱动样式

:focus-within 作为 :focus/:active 的补充方案

当目标不是单个按钮，而是整个卡片、表单项区域需要“任一子元素聚焦或激活时整体响应”，:focus-within 就比堆砌多个 :focus 和 :active 更简洁可靠。

典型场景：

• 一个 div.card 包含 input 和 button，希望输入框获得焦点或按钮被点击时，整个卡片加边框
• 写法：

  .card:focus-within {
    border: 2px solid #007bff;
  }
  .card:focus-within button:active {
    transform: translateY(1px);
  }

• :focus-within 会响应子元素的 :focus，也响应子元素的 :active（只要该子元素本身支持 :active）
• 兼容性：Chrome 60+、Firefox 61+、Safari 15.4+，IE 完全不支持；如需兼容老版本，仍需 JS 监听 + class 切换