如何修复Bootstrap分页组件的CSS点击态不明显？

必须为.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）。

1. 给所有.page-link加touch-action: manipulation !important;（注意加!important，避免被组件库覆盖）
2. 别只加在:active里，必须作用于常态；否则iOS下:active完全不触发
3. 如果父容器（比如.pagination或<nav>）设了touch-action: none，子元素的manipulation会被继承阻断，得一并清理

:active样式本身要避开视觉陷阱

很多开发者照搬PC端写法：.page-link:active { background: #007bff; }，结果在手机上要么没反应，要么背景色一闪即逝。问题出在两点：一是移动端没有“鼠标悬停”概念，二是默认tap highlight（灰色半透明遮罩）会和你的背景色打架。

1. 别只改background，同步加transform: scale(0.96)（轻微压缩），这是最直观的按下反馈
2. 用box-shadow: 0 0 0 2px rgba(0,123,255,.3)替代纯背景变色，避免文字被盖住
3. 禁用系统tap highlight：-webkit-tap-highlight-color: transparent;（iOS必需，Android部分版本也需）
4. 确保line-height和padding在:active下不变形，否则文字会“跳动”

动态禁用时:active必须同步失效

当页码按钮被JS设为disabled，很多人只写el.disabled = true，但:active伪类仍可触发——用户按下去有反馈，但实际没响应，体验割裂。

1. 禁用时，除了el.setAttribute('disabled', 'true')，还要加el.style.pointerEvents = 'none'
2. 同时移除touch-action: manipulation，否则iOS仍可能触发tap highlight
3. 启用时，两个都要恢复：el.removeAttribute('disabled') + el.style.pointerEvents = '' + el.style.touchAction = 'manipulation'
4. 别用opacity: .5模拟禁用——它不影响:active，也不阻止点击

事情说清了就结束。真正让点击态“明显”的从来不是多炫的CSS动画，而是touch-action声明、tap-highlight控制、以及禁用状态下的事件链完整切断——三者缺一不可。