:active与:focus样式怎么用？

要让它响应 :focus，必须显式设置 tabindex 属性：

<div tabindex="0">可聚焦的容器</div>
<span tabindex="-1">仅 JS 可 focus() 的元素</span>

tabindex="0" 表示按 TAB 可自然进入；tabindex="-1" 表示不能通过 TAB 进入，但可通过 JS .focus() 聚焦——这对模态框关闭按钮、下拉菜单项等场景很实用。

注意：加了 tabindex 后，:focus 样式才可能生效，但也意味着该元素进入了键盘导航流，需同步处理 Enter/Space 事件逻辑，否则会损害可访问性。

:active 的兼容性与移动端陷阱

桌面端 :active 在鼠标按下时触发稳定；但在 iOS Safari 和部分安卓 WebView 中，:active 默认延迟约 300ms 才触发（为双击缩放留判断时间），导致点击无反馈。这不是 bug，是历史遗留行为。

• 解决方法一：给 加 touch-action: manipulation，能消除延迟并启用 :active
• 解决方法二：用 ontouchstart + class 切换（更可控，但需 JS）
• 避免写 div:active { opacity: 0.7; } 却不加 cursor: pointer——这会让用户困惑“这东西到底能不能点？”
• :active 不会冒泡，也不能用 JS 监听，纯 CSS 状态，别指望它和 JS 状态同步

另外，:active 在键盘触发（如空格键激活按钮）时也生效，但只限于原生可交互元素；自定义 div[role="button"] 必须手动监听 keydown 并加 class，:active 对它无效。

组合使用 :focus 和 :active 的真实场景

一个常见需求：按钮在鼠标悬停时变色，点击时压下，且键盘聚焦时有清晰轮廓——三者不冲突，但顺序和覆盖逻辑很重要。

CSS 优先级通常按声明顺序覆盖，建议这样组织：

button {
  background: #eee;
}
button:hover {
  background: #ddd;
}
button:focus {
  outline: 2px solid #007bff;
}
button:active {
  background: #ccc;
}
button:focus:active {
  background: #bbb; /* 鼠标点击聚焦态按钮时的更深压感 */
}

关键点：

• :focus:active 是合法伪类组合，表示“既获得焦点又被按下”的瞬间
• 不要用 :focus 完全覆盖 :active 的视觉变化，否则键盘用户点击时会丢失按下反馈
• 如果禁用了 outline（如 outline: none），务必提供替代焦点指示（比如边框、阴影、背景色变化），否则 WCAG 2.4.7 失效
• 移动端 Safari 对 :focus 的触发较保守（常需点击 input 才触发），别依赖它做核心交互反馈

最易被忽略的是：很多人以为加了 :focus 就自动可访问，其实还得确保元素可键盘到达（tabindex）、可键盘操作（Enter/Space 响应）、焦点可见（不隐藏 outline 且有对比度）——缺一不可。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~