直接覆盖 .pagination .page-link 各状态样式（默认、:hover、.active、:disabled）才能统一颜色，仅改基础类会导致状态不一致；推荐用 CSS 变量配合手动补全 :hover 背景，并添加 touch-action: manipulation 解决移动端点击反馈问题。
直接覆盖 .pagination .page-link 的 CSS 样式就能改颜色，但必须确保你的规则在 Bootstrap CSS 之后加载，且要同步处理 .active、:hover 和禁用状态，否则点击后颜色会回退或失效。
为什么只改 .page-link 背景色没用
Bootstrap 分页的每个数字项本质是 <a> 标签，样式由多个状态叠加控制：.page-link（默认）、.page-link:hover（悬停）、.page-item.active .page-link（当前页）、.page-link:disabled（禁用）。只改基础类，其他状态仍走默认蓝/灰，视觉上就“不统一”甚至“闪一下变回去”。
- 常见错误现象：点中某页后颜色立刻恢复成默认蓝，或鼠标移上去变色但移开就还原
- 根本原因是选择器权重不够，或者没覆盖所有状态伪类
- Bootstrap 5.3+ 使用 CSS 变量（如
--bs-pagination-color、--bs-pagination-bg），但这些变量只影响基础样式，.active和:hover仍需单独声明
正确覆盖 .page-link 颜色的写法
推荐在自定义 CSS 文件中写，且该文件必须放在 Bootstrap CSS <link> 之后。不用 !important，靠选择器权重和顺序即可生效。
-
.pagination .page-link：设默认文字色、背景色、边框 -
.pagination .page-link:hover：设悬停背景和文字色（别漏） -
.pagination .page-item.active .page-link：设当前页的背景和文字色（注意嵌套层级） -
.pagination .page-link:disabled：设禁用态透明度或灰阶，保持可读性
示例：
立即学习“前端免费学习笔记（深入）”；
.pagination .page-link {
color: #4a6fa5;
background-color: #f8fafc;
border-color: #e2e8f0;
}
.pagination .page-link:hover {
color: #2563eb;
background-color: #edf2f7;
border-color: #cbd5e0;
}
.pagination .page-item.active .page-link {
color: #fff;
background-color: #2563eb;
border-color: #2563eb;
}
.pagination .page-link:disabled {
color: #a0aec0;
background-color: #f8fafc;
opacity: 0.6;
}
用 CSS 变量批量控制分页颜色（Bootstrap 5.3+）
如果你项目已启用 CSS 变量方案，可以直接重设 :root 下的分页相关变量，比写一堆选择器更简洁，也便于主题切换。
-
--bs-pagination-color：默认文字色 -
--bs-pagination-bg：默认背景色 -
--bs-pagination-border-color：默认边框色 -
--bs-pagination-hover-color：悬停文字色（注意：无 hover-bg 变量，需额外覆盖:hover） -
--bs-pagination-active-color和--bs-pagination-active-bg：当前页颜色
示例（全局生效）：
:root {
--bs-pagination-color: #4a6fa5;
--bs-pagination-bg: #f8fafc;
--bs-pagination-border-color: #e2e8f0;
--bs-pagination-active-color: #fff;
--bs-pagination-active-bg: #2563eb;
--bs-pagination-active-border-color: #2563eb;
}
⚠️ 注意：--bs-pagination-hover-color 存在，但 Bootstrap 源码里没定义对应的 --bs-pagination-hover-bg，所以仍需手动加 .page-link:hover 规则补全背景色。
移动端点击无反馈？检查 :active 和 touch-action
在 iOS Safari 或部分安卓 WebView 中，.page-link:active 可能不触发，导致点击瞬间没变色反馈。这不是颜色没设对，而是浏览器压根没激活伪类。
- 解决方法一：给
.page-link加touch-action: manipulation;，强制启用轻触反馈 - 解决方法二：补充
.page-link:active样式（哪怕只改个opacity），并确保它在 CSS 中位置靠后 - 真机测试不可跳过：模拟器常忽略这类渲染差异，实测才能确认是否生效
容易被忽略的是：分页组件本身不带 JS 行为，它的“激活”纯靠 class 控制（.active），而“点击瞬时反馈”靠 :active —— 这两者逻辑独立，得分别照顾。
