应使用 JavaScript 控制 class 切换实现持久变色，而非依赖 :active 或 :focus 伪类；:active 仅在按下瞬间生效，:focus 由焦点行为控制，二者均无法持久记录状态。
按钮点击后变色又立刻恢复，不是 CSS 写错了，而是你误用了 :active 或 :focus 去表达“已选中”状态——它们根本做不到持久变色。
为什么 :active 点完就恢复白色？
:active 只在鼠标按下、触屏按住、或空格/回车触发的那「一帧」内生效，松手即消失。它不是状态记录器，只是瞬态反馈信号。
- 常见现象：点击按钮背景变深，手指一抬立刻回原色——这是
:active正常行为，不是 bug - 别把它当开关用：写
.btn:active { background: #0056b3; }永远不会让按钮“保持蓝色” - 移动端尤其容易误判：iOS Safari 默认不触发
:active，除非加cursor: pointer和空touchstart监听器
为什么 :focus 也不能替代“已选中”？
:focus 是焦点状态，不是激活状态。它持续存在，但生命周期完全由用户导航行为决定——TAB 进来就有，点别处或按 ESC 就丢，和你的业务逻辑无关。
- 典型错误：给按钮加
.btn:focus { background: #0056b3; }，结果用户点完还得手动 TAB 移走焦点才能“取消高亮” - 原生
<button>默认可聚焦，但自定义<div role="button">必须加tabindex="0"才能触发:focus - 一旦加了
tabindex，就得同步处理Enter和Space键，否则键盘用户卡死
真正该怎么做：用 class 切换控制持久状态
想实现“点 A 变蓝、点 B 变蓝、A 自动恢复”，必须靠 JS 控制 class，再由 CSS 定义样式。这才是语义清晰、可维护、无障碍友好的做法。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- HTML 中给所有按钮统一加
class="nav-btn"，不要依赖onclick行内脚本 - JS 用
classList.toggle()或classList.replace()，避免直接操作element.style.backgroundColor - CSS 写成
.nav-btn.is-active { background: #0056b3; }，把样式逻辑完全交给 CSS 管理 - 如果要兼容键盘导航，配合
[aria-pressed="true"]而不是硬塞:focus
表单里按钮点一下页面刷新，颜色全丢？
这根本不是样式问题，是 HTML 行为没控住——<button> 在 <form> 里默认是 type="submit"，点击即提交并刷新。
- 最简修复：显式写
<button type="button">GET</button> - 防御性写法：所有非提交用途的按钮，一律声明
type="button" - 别信“没写 type 就没事”，浏览器永远按规范兜底，不是按你想象兜底
真正容易被忽略的是：伪类只管“怎么反馈”，不管“要不要反馈”。状态管理、焦点流、可访问性支持，都得靠结构和 JS 配合，不是加个 :active 就万事大吉。
