:hover必须写在:active之前，否则同权值下:hover会覆盖:active导致点击无反馈；移动端:hover基本无效，应优先用:active或js方案。
为什么:hover写在:active前面会导致点击无反馈
因为两者权值完全相同，浏览器只按声明顺序做层叠覆盖——:active必须写在:hover之后，否则鼠标按下瞬间触发的:active样式会被仍在生效的:hover直接盖掉。
常见错误现象：
- 按钮悬停变色正常，但点击时毫无视觉变化
- 移动端真机上
:active完全不触发（尤其 iOS Safari） - 键盘用户按 Tab 聚焦后，再用鼠标点击，
:active被:focus压制
实操建议：
-
:active必须紧接在:hover之后（LVHA 顺序中它排最后） - 如果加了
:focus，应插在:hover和:active之间，即:hover → :focus → :active - 别用
!important强行提权:hover，这会让:active彻底失效
:hover和:active的过渡动画为什么会打架
当两者都用了transition: all，悬停态还没结束，点击态就进来，状态切换时属性冲突，导致“悬停放大后突然回弹”或“点击缩放后卡在中间态”。
性能与兼容性影响：
-
transition: all会触发重绘甚至重排，尤其涉及width、top等布局属性时 - iOS Safari 对
:active的触发窗口极短（约 50ms），过渡时间超过这个值就看不到效果
实操建议：
-
:hover用transition: background-color 0.2s, transform 0.15s -
:active单独设transition: transform 0.08s，且只动transform或background-color - 避免在
:active里写opacity或box-shadow的复杂过渡，容易糊成一团
移动端为什么:hover基本等于摆设
触摸设备没有持续的“悬停”概念，:hover在 iOS Safari 中仅在点击后瞬时触发一次，安卓 Chrome 则可能完全跳过——这不是 bug，是规范行为。
使用场景差异：
- 桌面端：鼠标移入→
:hover生效→移出→恢复 - 移动端：点击目标→短暂触发
:hover→立刻进入:active→松手后消失
实操建议：
- 别依赖
:hover实现核心交互，比如下拉菜单或工具提示 - 给按钮加
cursor: pointer和-webkit-tap-highlight-color: transparent - 真要支持触屏反馈，用
touchstart/touchend加 class，或改用:focus-within+tabindex
:visited为什么不能和:hover/active混着调顺序
:visited不是普通伪类，它是浏览器在匹配阶段就提前判断的状态，且只能作用于已访问过的<a></a>标签。顺序错，它可能根本不会参与样式计算。
容易踩的坑：
- 把
:visited写在:hover后面，已访问链接就再也看不到悬停效果 - 在
:visited里写background-image或transform，整条规则会被静默丢弃（连控制台警告都没有） - 哪怕你只用
:link和:visited，也得按 LVHA 写全，中间不能插注释或空行（某些旧引擎会解析异常）
真正容易被忽略的地方是：这个顺序不是为了“让代码好看”，而是浏览器内部状态匹配逻辑决定的硬性要求。一旦加了:visited，它就必须紧跟:link，否则后续所有伪类都可能失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
