当按钮通过键盘 Tab 聚焦并点击（或空格键触发）时，:active 伪类常失效——根源在于 :hover:active 的链式写法不被浏览器支持，且聚焦态（:focus）未参与样式匹配。正确方案是分离声明，并显式包含 :focus:active 组合。
当按钮通过键盘 tab 聚焦并点击（或空格键触发）时，`:active` 伪类常失效——根源在于 `:hover:active` 的链式写法不被浏览器支持，且聚焦态（`:focus`）未参与样式匹配。正确方案是分离声明，并显式包含 `:focus:active` 组合。
在 CSS 中，伪类组合有明确的规范限制：:hover:active 这类连续叠加两个用户交互伪类（如 :hover、:active、:focus）的写法不符合 CSS 选择器语法标准，且现代浏览器普遍不支持该组合的匹配逻辑。更关键的是，当用户通过键盘聚焦按钮（而非鼠标悬停）时，:hover 根本不成立，此时 :hover:active::before 完全不会生效——这正是你遇到“聚焦后点击无 active 效果”的根本原因。
要确保 active 样式在鼠标点击和键盘操作（Tab + Space/Enter）下均生效，需覆盖所有可能的触发路径。推荐采用以下结构化写法：
/* 基础 hover 效果（鼠标悬停时） */
button:hover::before {
content: "";
/* 例如：背景遮罩、阴影增强等 hover 样式 */
background-color: rgba(0, 0, 0, 0.1);
}
/* 点击/激活状态：覆盖鼠标点击 & 键盘触发（focus + active） */
button:active::before,
button:focus:active::before {
content: "";
/* 此处放置你期望的 active 覆盖样式，如更深色遮罩 */
background-color: rgba(0, 0, 0, 0.3);
}
/* 可选：增强可访问性，为聚焦态添加可见轮廓（避免移除 outline） */
button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}⚠️ 注意事项：
- 勿移除 outline：为满足 WCAG 2.1 可访问性要求，button:focus 必须保留清晰的焦点指示；若需自定义样式，请用 outline 替代而非 outline: none。
- :focus:active 有效但有限制：该组合仅在按钮已获得焦点（如 Tab 进入）且用户按下空格/Enter 时匹配，是解决键盘操作的关键。
- 避免过度依赖 :hover：纯键盘用户无法触发 :hover，所有核心交互反馈（尤其是 active 态）必须独立于 hover 存在。
总结：将 :hover:active 拆分为独立的 :active 和 :focus:active 规则，并确保 active 样式逻辑不依赖 hover 状态，即可实现鼠标与键盘双通道下一致、可访问的按钮激活反馈。
