:focus点击后变色“失效”是因为它依赖浏览器焦点管理，一旦焦点被其他可聚焦元素抢占或用户主动移开，原元素即失焦；默认不可聚焦元素（如<span>）需设tabindex="0"才生效。
:focus 能让点击后颜色“看起来不回弹”，但前提是元素必须能获得焦点，且用户不主动移开焦点——它不是真正的状态保持，而是一种焦点残留的视觉错觉。
为什么 :focus 点击后变色会“失效”？
常见现象是：点一下按钮，颜色变了；点页面空白处或另一个输入框，颜色又退回去了。这是因为 :focus 依赖浏览器焦点管理，一旦焦点被其他可聚焦元素抢走（比如 <input>、<button>、带 tabindex 的 <div>），原元素就自动失焦。
- 默认不可聚焦的元素（如
<span>、<p>、无tabindex的<div>）根本不会触发:focus -
tabindex="-1"允许 JS 主动聚焦（el.focus()），但鼠标点击不会让它获得焦点 -
tabindex="0"是最常用解法：既支持鼠标点击获焦，也支持键盘 Tab 导航 - 移动端 Safari 对
:focus的触发更保守，常需配合touch-action: manipulation降低延迟
:focus 和 :active 别混用
:active 只在鼠标按下/触摸按住瞬间生效，松开即消失，和“保持”完全无关。把它和 :focus 写成同一套样式（比如都设 background-color: red），容易误以为“点了就留色”，其实只是两个不同时机的样式巧合叠加。
-
:active适合做按压反馈（比如按钮凹陷感） -
:focus适合做“当前操作上下文”的视觉提示（比如表单区域高亮） - 若真要模拟“选中态”，应单独定义一个类（如
.is-selected），由 JS 控制，而非依赖焦点生命周期
哪些场景下 :focus “假装保持”还算可用？
当交互链路短、焦点不易丢失时，:focus 可作为轻量替代方案，省去 JS 绑定。典型例子：
立即学习“前端免费学习笔记（深入）”；
- 单页内仅有一个操作区，且无其他可聚焦控件（比如纯展示型筛选标签栏）
- 按钮本身是
<button>或<a href="#">，天然可聚焦 - 配合
outline: none时，务必提供其他焦点指示（如边框加粗、背景微调），否则违反无障碍规范 - 使用示例：
<button tabindex="0">选项 A</button> <button tabindex="0">选项 B</button> button:focus { background-color: #4a90e2; color: white; }
真正需要跨点击、跨刷新、跨设备同步“已选中”状态时，:focus 就撑不住了——它不存状态，也不响应业务逻辑。这时候该交还给 JS：用 classList.toggle()、结合 localStorage 或组件响应式数据，才是稳的。
