直接改--bs-pagination-bg无效，因bootstrap 5中.page-link背景色硬编码为var(--bs-white)，不读该变量；真正控制选中态的是.page-item.active .page-link，须显式覆盖其background-color、border-color和color，并同步处理:hover、:focus、.disabled等状态。
直接改 --bs-pagination-bg 没效果，因为 Bootstrap 5 的选中态颜色压根不读这个变量；真正起作用的是 .page-item.active .page-link 这个选择器，必须显式覆盖它的 background-color、border-color 和 color。
为什么改 --bs-pagination-bg 无效
Bootstrap 5 中 --bs-pagination-bg 只用于 .pagination 容器背景，而页码链接（.page-link）的背景色被硬编码为 var(--bs-white)，根本没引用该变量。你在 :root 里改了它，.page-link 也看不到。
-
.page-item.active .page-link才是控制当前页高亮的唯一关键选择器 - 漏掉这个规则，无论其他样式怎么调，当前页都不会变色
- 即使用了 CSS 变量（如
--bs-pagination-active-bg），它只在 Sass 编译时生效，最终生成的 CSS 仍是固定值，不响应运行时变量变更
必须同时覆盖的四个状态
只写 .page-item.active .page-link 不够——用户交互过程中会触发多个状态，漏一个就视觉断裂：
-
.my-pagination .page-link：默认未点击态（背景、边框、文字色） -
.my-pagination .page-link:hover：鼠标悬停（别只改背景，边框和文字色要同步） -
.my-pagination .page-item.active .page-link：当前页（注意是.page-item上有active类） -
.my-pagination .page-link:focus：键盘聚焦或点击后残留状态（建议用box-shadow替代outline，兼顾可访问性）
禁用态（.disabled）容易被忽略但很关键
分页首/末页常处于禁用状态，若不单独处理，它们会沿用默认浅灰背景和深灰文字，在深色主题下几乎不可读：
-
.my-pagination .page-item.disabled .page-link必须独立声明 - 不要复用
.page-link默认值，禁用态通常需要更弱的对比度 - 如果用了深色模式，记得加
@media (prefers-color-scheme: dark)重设所有状态
包裹容器 class 比全局覆盖更安全
直接写 .pagination .page-link 会污染第三方组件（比如 bootstrap-table 内置分页），正确做法是：
- HTML 中加自定义容器：
<nav class="my-pagination"><ul class="pagination"></ul></nav> - CSS 用
.my-pagination .page-link开头，确保样式仅作用于你控制的分页 - 自定义 CSS 文件必须在 Bootstrap 的 CSS 之后加载，否则变量和选择器都无效
最易被忽略的一点：浏览器开发者工具里看到 .page-link 的 background-color 显示为 var(--bs-pagination-bg)，不代表你能靠改这个变量驱动选中态——它只是“默认页码”的背景变量，和当前页完全无关。
