a:active 不变色主因是被后声明的 :hover 或 :focus 覆盖，应将其置于二者之后；移动端需确保可交互语义或添加 touch-action；transition 必须写在常态选择器中；多维视觉反馈（如位移+颜色）更可靠。
链接 :active 不变色？检查是否被 :hover 或 :focus 覆盖
写 a:active { color: red; } 却没反应，大概率是后续声明的 a:hover 或 a:focus 把颜色又改回去了。CSS 层叠规则里，后写的同权重规则会覆盖前面的。
实操建议：
- 把
a:active放在a:hover和a:focus之后声明，例如：a:link { color: #007bff; } a:visited { color: #6c757d; } a:hover { color: #0056b3; } a:active { color: #004085; } - 用浏览器开发者工具的 Styles 面板，勾选 :active 强制状态，看哪条 color 规则被划掉——被划掉的就是被覆盖了
- 避免给
:hover加!important，否则:active也得加才能赢，破坏可维护性
移动端点击无反馈？a 标签默认不触发 :active
iOS Safari 和部分安卓 WebView 对普通 <a href="#"></a> 不主动启用 :active，尤其当它没实际跳转目标（如 href="#" 或 href="javascript:void(0)"）时，浏览器可能直接跳过激活态计算。
实操建议：
- 确保
<a></a>有明确交互意图：加href="#" onclick="return false;"，或更好——改用<button type="button"></button>语义化替代 - 强制启用触摸响应：
a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } - 如果必须用
<a></a>，补上tabindex="0"让它可聚焦，提升:active触发稳定性
:active 动画一闪就消失？transition 必须写在常态选择器里
:active 是瞬时伪类，松开鼠标或手指就立刻退出，它本身不控制动画时长。想让“按下”有缓动效果，transition 得定义在默认状态，而不是 :active 里。
实操建议：
- 正确写法：
a { color: #007bff; transition: color 0.08s ease, transform 0.06s ease; } a:active { color: #004085; transform: translateY(1px); } - 错误写法：
a:active { color: #004085; transition: color 0.08s; }—— 这个 transition 根本不会生效 - 优先过渡
transform和color，避免用background-color做唯一反馈，人眼对位移更敏感；且颜色过渡超过 0.1s 就显得迟钝
为什么只改文字颜色不够？:active 反馈需要多维变化
纯靠 color 或 background-color 变化，在小屏、强光或色弱场景下极易被忽略。:active 的价值是模拟物理按压感，单维度变化无法建立可信反馈。
实操建议：
- 至少组合两个变化：比如
transform: translateY(1px)+color深一度 +text-shadow: 0 1px 1px rgba(0,0,0,0.1) - 避免
width/height缩放，会触发布局重排，造成卡顿；transform: scale()更安全，但注意父容器overflow: hidden可能裁掉边缘 - 别依赖
:active表达关键状态（如“已提交”），它无法响应长按、滑出、键盘操作等边界情况，复杂逻辑请用 JS 控制is-pressed类
:active，而是让它在各种设备、各种交互方式下都稳定触发、及时响应、视觉可信——这些细节藏在 meta 标签、touch-action、transition 初始值和元素语义里，漏掉任何一环，用户点下去就只是“没反应”。
