直接改 .page-link 的 background-color 没效果，是因为 Bootstrap 5 分页样式依赖多层状态选择器（默认、:hover、.page-item.active .page-link、:focus），单一规则权重不足且无法覆盖所有状态；必须统一覆盖四类状态，或使用 CSS 变量（如 --bs-pagination-bg）在 Bootstrap 后加载以确保生效。
直接改 .page-link 的 background-color 为什么没效果
因为 bootstrap 5 的分页样式依赖多层状态控制，只写一条 .page-link { background-color: #0d47a1; } 会被:hover、.active、:focus 等更具体的选择器覆盖。浏览器开发者工具里能看到样式被划掉，不是代码没生效，是权重不够或状态没覆盖全。
必须同时覆盖的四个关键状态
漏掉任意一个，都会出现“点一下变色，移开就恢复”“当前页没高亮”“键盘聚焦后边框错乱”等问题：
-
.my-pagination .page-link：默认未激活态（背景、边框、文字色） -
.my-pagination .page-link:hover：鼠标悬停时的过渡态 -
.my-pagination .page-item.active .page-link：当前页——注意是.page-item上有active类，不是.page-link自己 -
.my-pagination .page-link:focus：点击或 Tab 键聚焦后残留的 outline，默认是 box-shadow，建议重设而非用outline: none
用 CSS 变量比硬写颜色更稳
Bootstrap 5.3+ 默认通过 --bs-pagination-bg、--bs-pagination-border-color 等变量控制样式。如果你的自定义 CSS 在 Bootstrap 之后加载，可以直接改变量：
:root {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-hover-bg: #3a5a8c;
--bs-pagination-active-bg: #2a4a7c;
}
这样改完，所有 .pagination 实例都会响应，且深色模式下可配合 @media (prefers-color-scheme: dark) 统一调整，不用重复写状态选择器。
包裹用 .my-pagination 而不是直接改 .pagination
全局覆盖 .pagination .page-link 容易污染第三方组件（比如 bootstrap-table 内部的分页），尤其当它动态生成 DOM 时更难定位。正确做法是：
- HTML 中显式加自定义容器：
<nav class="my-pagination"><ul class="pagination">...</ul></nav> - CSS 用
.my-pagination .page-link开头，确保作用域隔离 - 避免在
.less或.scss中重新赋值@primary-color这类全局变量——改一个分页，导航栏按钮也跟着变色
真正容易被忽略的是：CSS 变量修改后，要确认你的样式表确实加载在 Bootstrap 的 CSS 之后；否则变量根本不会被重写，页面还是用默认值渲染。
