button:active没反应需先设-webkit-tap-highlight-color: transparent；高亮需JS控制状态、多层视觉信号叠加，并保障键盘与屏幕阅读器可访问性。
button:active没反应？先清掉-webkit-tap-highlight-color
移动端点下去没变色，八成是 iOS Safari 或某些 Android 浏览器在背后加了一层半透明灰色遮罩，盖住了你的 :active 样式。这不是你写错了，是浏览器“好心办坏事”。
必须显式关掉它：
button {
-webkit-tap-highlight-color: transparent;
background-color: #2563eb;
transition: background-color 0.12s ease;
cursor: pointer;
}
<p>button:active {
background-color: #1d4ed8;
}</p>
-
-webkit-tap-highlight-color: transparent是硬性前提，不加这行，iOS 上:active基本不可见 -
transition时间别超0.15s，否则“瞬间”感消失，变成慢吞吞的渐变 - 别用
!important强顶，先查 CSS 选择器权重——父级重置样式（比如body * { background: white; }）可能默默覆盖了你
要“按下去就留着高亮”，JS 控制 class 才可靠
CSS 的 :active 只管按下那一下，松手就还原。真想让按钮“被选中后一直高亮”，得靠 JavaScript 记状态。
典型场景：新手引导里的当前步骤按钮、单选式操作项、表单中已确认的提交动作。
- 给按钮加统一 class，比如
guide-btn，再配data-step="2"这类语义化属性 - 点击时先清空所有
is-highlighted类，再给当前按钮加：btn.classList.add("is-highlighted") - 别用
toggle()，用户手滑点两下就取消了，状态就断了 - 动态插入的按钮（如通过
innerHTML渲染），别反复addEventListener，改用事件委托：document.addEventListener("click", e => { if (e.target.matches(".guide-btn")) { ... } })
高亮不能只改 background-color
在浅灰背景上把按钮背景改成纯白，人眼根本看不出变化；在深色主题下又会闪得刺眼。单一样式变化极易失效。
真正有效的高亮是多层信号叠加：
- 加
box-shadow: 0 0 0 3px #2563eb, 0 0 0 6px rgba(37, 99, 235, 0.2)模拟焦点环，不挤占布局，且和主流 UI 库视觉一致 - 微调尺寸感：
transform: scale(1.02)配合transition: all 0.15s ease - 必须设
cursor: pointer，否则移动端用户根本不知道这是可点区域 - 别用
outline，它会破坏对齐，还可能被系统高对比度模式强制覆盖
键盘和屏幕阅读器用户不能被忽略
只靠鼠标或触摸实现的高亮，在键盘用户（Tab 切换 + Enter/Space 触发）或屏幕阅读器用户眼里就是黑盒。这不是体验加分项，是可访问性底线。
- 按钮必须能被聚焦：确保没设
tabindex="-1"，必要时加tabindex="0" -
:focus样式不能被全局outline: none覆盖，至少保留box-shadow等替代方案 - 如果高亮状态由 JS 控制，
keydown监听 Enter/Space 键也得同步触发相同逻辑，否则键盘用户点了没反应 - 移动端 touchstart 比 click 早触发，若同时监听两者，记得在 touchstart 里加
event.preventDefault()，防止 click 重复执行
高亮不是加个颜色就完事，最常漏掉的是 -webkit-tap-highlight-color: transparent 和键盘可访问性支持——这两处一缺，一半用户根本看不到效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
