必须为.page-link添加touch-action: manipulation !important并禁用-webkit-tap-highlight-color，同时在禁用状态同步移除pointer-events和touch-action，三者缺一不可。
为什么.page-link的:active态在手机上“按不动”
不是CSS没写:active，而是移动端点击反馈被系统默认压制了。iOS Safari 和 Android Chrome 默认会延迟300ms触发click事件，并且不渲染:active伪类，除非你明确告诉它“这个元素需要快速响应”。常见现象是：手指按下去没颜色变化、没缩放、没阴影，松开才跳转——用户根本不确定自己点没点中。
必须加touch-action: manipulation才能激活点击态
这是最关键的一步，漏掉就白调CSS。Bootstrap默认没设这个属性，而现代浏览器要求显式声明才能启用原生点击反馈（包括:active、tap highlight、快速click）。
- 给所有
.page-link加touch-action: manipulation !important;（注意加!important，避免被组件库覆盖） - 别只加在
:active里，必须作用于常态；否则iOS下:active完全不触发 - 如果父容器（比如
.pagination或<nav></nav>）设了touch-action: none，子元素的manipulation会被继承阻断，得一并清理
:active样式本身要避开视觉陷阱
很多开发者照搬PC端写法：.page-link:active { background: #007bff; }，结果在手机上要么没反应，要么背景色一闪即逝。问题出在两点：一是移动端没有“鼠标悬停”概念，二是默认tap highlight（灰色半透明遮罩）会和你的背景色打架。
- 别只改
background，同步加transform: scale(0.96)（轻微压缩），这是最直观的按下反馈 - 用
box-shadow: 0 0 0 2px rgba(0,123,255,.3)替代纯背景变色，避免文字被盖住 - 禁用系统tap highlight：
-webkit-tap-highlight-color: transparent;（iOS必需，Android部分版本也需） - 确保
line-height和padding在:active下不变形，否则文字会“跳动”
动态禁用时:active必须同步失效
当页码按钮被JS设为disabled，很多人只写el.disabled = true，但:active伪类仍可触发——用户按下去有反馈，但实际没响应，体验割裂。
- 禁用时，除了
el.setAttribute('disabled', 'true')，还要加el.style.pointerEvents = 'none' - 同时移除
touch-action: manipulation，否则iOS仍可能触发tap highlight - 启用时，两个都要恢复：
el.removeAttribute('disabled')+el.style.pointerEvents = ''+el.style.touchAction = 'manipulation' - 别用
opacity: .5模拟禁用——它不影响:active，也不阻止点击
touch-action声明、tap-highlight控制、以及禁用状态下的事件链完整切断——三者缺一不可。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
