按钮点击无反应需检查:active是否被:focus覆盖；确保:active声明在:focus/:hover之后；移动端需加cursor:pointer和-webkit-tap-highlight-color:transparent；禁用态应避免用disabled属性而改用pointer-events:none。
按钮点击时没反应？检查 :active 是否被 :focus 覆盖
很多情况下写好了 :active 样式，但鼠标点击按钮却看不到压下效果，常见原因是 :focus 或 :hover 的样式权重更高，或者浏览器默认聚焦行为干扰了视觉反馈。Chrome 和 Safari 在点击后会自动给按钮加 :focus，如果 :focus 样式里写了和 :active 冲突的 transform 或 background-color，就会覆盖掉点击态。
- 确保
:active的 CSS 规则在:focus和:hover之后声明（顺序影响层叠） - 避免在
:focus中设置outline: none后不补替代视觉反馈，否则键盘用户也失去焦点提示 - 移动端需额外加
touch-action: manipulation，否则 iOS Safari 可能延迟触发:active
:hover 和 :active 的过渡动画不能共用 transition-property
:hover 常用来做悬停放大或变色，:active 做按下缩放，但若两者都用 transition: all 0.2s，容易出现「悬停时突然回弹」或「点击后悬停态残留」的问题——因为 :active 状态一结束，元素会立刻从激活态切回常态，而 :hover 还在生效，导致过渡方向混乱。
- 分开控制：给
:hover设transition: background-color 0.2s, transform 0.15s；给:active单独设transition: transform 0.08s -
:active的持续时间建议 ≤ 0.1s，模拟真实按键反馈，太长反而显得卡顿 - 慎用
transition: all，它会让所有可动画属性参与过渡，包括你没意识到的box-shadow或opacity
移动端真机上 :active 失效？补上 cursor 和 tap-highlight-color
安卓 Chrome 和 iOS Safari 对 :active 的触发有特殊限制：默认只对 和带 onclick 的元素响应，纯 若没绑定任何 JS 事件，部分机型可能跳过 :active 样式。
- 给按钮加
cursor: pointer，这是触发移动端:active的关键信号之一 - iOS 需清除灰色点击高亮：
-webkit-tap-highlight-color: transparent - 更稳妥的做法是加空事件监听：
button.addEventListener('touchstart', () => {});，哪怕什么都不做，也能激活伪类响应
按钮禁用态（:disabled）会屏蔽 :hover 和 :active
一旦按钮设了 disabled 属性，所有交互伪类（:hover、:active、:focus）都会失效，这点和 pointer-events: none 不同——后者只是拦截事件，伪类仍可匹配。
- 若需在禁用状态下保留悬停提示（比如 tooltip），改用
opacity: 0.5; pointer-events: none替代disabled - 用
[disabled]选择器设置禁用样式，不要依赖:disabled后再叠加:hover，那部分规则永远不会生效 - 注意：表单提交按钮在
form提交中自动添加disabled，此时 JS 无法靠监听:active判断是否正在点击
实际项目里最常被忽略的是 :active 在触摸设备上的触发时机和持续时间——它不是“按住就一直存在”，而是仅在 touchstart 到 touchend 的极短时间内生效，且没有 hover 状态的缓冲余地。把交互节奏想成物理按键，而不是 CSS 状态切换，更容易调出自然的手感。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
