CSS 中 :hover:active 这类多伪类连续写法无效，浏览器不支持；应改用独立的 :active 和 :hover 规则分别定义，并确保 :active 能在键盘聚焦（如 Tab）后配合空格/回车触发时生效。

css 中 `:hover:active` 这类多伪类连续写法无效，浏览器不支持；应改用独立的 `:active` 和 `:hover` 规则分别定义，并确保 `:active` 能在键盘聚焦（如 tab）后配合空格/回车触发时生效。

在 Web 可访问性实践中，用户不仅通过鼠标操作按钮，还常使用键盘（Tab 导航 + Space/Enter 激活）。此时，:hover:active 组合选择器根本不会匹配——因为键盘聚焦时无 :hover 状态，且 CSS 规范明确禁止将 :hover 与 :active 同时链式应用于同一元素（即 button:hover:active 是无效选择器，会被浏览器忽略）。

✅ 正确做法是分离声明，为不同交互状态提供独立样式：

/* 鼠标悬停时的视觉反馈 */
button:hover::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* 按钮被激活时（鼠标按下 或 键盘触发：聚焦后按 Space/Enter） */
button:active::before,
button:focus:active::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.3); /* 更强的按下反馈 */
}

⚠️ 关键注意事项：

• :active 本身在键盘操作中默认有效，但前提是按钮具有可聚焦性（原生 默认可聚焦；若为
  ，需添加 tabindex="0"）；

  不要依赖 :focus:active —— 实际上，:focus 和 :active 不会同时存在：:active 仅在用户“按下”瞬间触发（鼠标左键按住 / 键盘按下 Space），而 :focus 是持久状态。因此更稳妥的方式是直接使用 button:active::before，它天然兼容鼠标和键盘激活；

  若需强化键盘用户的感知，建议额外添加 button:focus 样式（如清晰的 outline 或阴影），并确保 :active 样式在 :focus 基础上叠加生效（CSS 层叠优先级足够即可）；

  测试时务必使用真实键盘操作：Tab 切入按钮 → 按 Space 键 → 观察 :active 是否触发（可通过 DevTools 的 “Force state” 功能模拟验证）。

  ? 总结：放弃 :hover:active 这一无效写法，拥抱语义清晰、可访问友好的独立伪类规则。既保障鼠标用户的交互反馈，也尊重键盘与辅助技术用户的操作路径——这才是现代前端开发中真正健壮的按钮状态管理方案。