直接修改 --bs-pagination-bg 无效，因 Bootstrap 5 中 .page-link 背景色写死为 var(--bs-white)，仅 .page-item.active .page-link 控制选中态，需显式覆盖 background-color、border-color 和 color，并确保 CSS 在 Bootstrap 后加载。
为什么直接改 --bs-pagination-bg 没反应
不是变量没生效，是 bootstrap 5 默认只在部分内部规则里用 --bs-pagination-bg，比如 .pagination 容器背景，但 .page-link 的背景色默认写死为 var(--bs-white)，并不读取该变量。你在 :root 里改了 --bs-pagination-bg，但 .page-link 根本不认它。
.page-item.active .page-link 才是控制选中态颜色的关键选择器
Bootstrap 把“当前页”样式绑定在 .page-item.active .page-link 上，而不是 .page-link.active 或其他变体。漏掉这个选择器，就永远看不到高亮效果。
- 必须显式覆盖
background-color、border-color和color - 别只写
.page-link，它只管普通页码，不管选中态 - 如果用了深色模式，记得加
@media (prefers-color-scheme: dark)重设值 - 禁用态（
.page-item.disabled .page-link）也要单独处理，否则“首页不可点”时颜色错乱
用 CSS 变量统一控制的可行路径
Bootstrap 5.3+ 确实暴露了 --bs-pagination-active-bg 和 --bs-pagination-active-border-color，但它们**仅在 Sass 编译时被引用**，生成的 CSS 里仍是硬编码值。想靠纯 CSS 变量驱动选中态，得自己补全绑定：
:root {
--my-pagination-active-bg: #2a4a7c;
--my-pagination-active-border: #1a3a6c;
}
.my-pagination .page-item.active .page-link {
background-color: var(--my-pagination-active-bg);
border-color: var(--my-pagination-active-border);
color: white;
}
注意：你的自定义 CSS 必须在 Bootstrap 样式表之后加载，否则变量还没定义就被读取了。
容易被忽略的兼容性细节
.page-item.active 的结构必须严格符合 Bootstrap 文档——active 类只能加在 <li class="page-item"> 上，加在 <a class="page-link"></a> 上完全无效。另外，:focus 和 :hover 状态若没同步调整，键盘用户 Tab 到当前页时会看到边框突兀闪动，不是 bug，是你漏写了 .page-item.active .page-link:focus。
