--bs-pagination-bg 修改无效，因 bootstrap 5 中页码选中态由 .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-link默认背景色是写死的，不是通过变量动态计算的 -
--bs-pagination-active-bg等变量只在 Sass 编译阶段被使用，最终生成的 CSS 是固定值，不响应运行时变量变更 - 浏览器开发者工具里能看到你的规则被划掉，大概率就是权重不够或目标选择器不对
.page-item.active .page-link 必须显式覆盖
这是唯一控制当前页高亮的颜色入口。漏掉这个选择器，无论其他样式怎么调，当前页都不会变色。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 注意结构：
active类必须加在<li class="page-item">上，不是加在<a class="page-link"></a>上 - 必须同时声明
background-color、border-color和color，缺一不可 - 别写成
.page-link.active—— Bootstrap 不这么用，无效
四个状态必须一起处理，否则交互断裂
只覆盖 .page-item.active .page-link 还不够。用户点击、悬停、键盘聚焦、禁用时都会触发不同状态，漏一个就视觉错乱。
-
.my-pagination .page-link：默认态（背景、边框、文字色） -
.my-pagination .page-link:hover：鼠标悬停（背景、边框、文字色要同步变） -
.my-pagination .page-item.active .page-link：当前页（重点！） -
.my-pagination .page-link:focus：键盘聚焦或点击后残留状态，建议用box-shadow替代outline -
.my-pagination .page-item.disabled .page-link：禁用态容易被忽略，但首/末页常处于此状态，不单独处理在深色主题下几乎不可见
用自定义容器 class 隔离样式，避免污染
直接写 .pagination .page-link 会污染第三方组件（比如 bootstrap-table 内置分页），尤其当它们动态生成 DOM 时更难调试。
- HTML 中加包裹容器：
<nav class="my-pagination"><ul class="pagination"></ul></nav> - CSS 前缀统一用
.my-pagination开头，确保作用域隔离 - 自定义 CSS 文件必须在 Bootstrap 的 CSS 之后加载，否则变量和选择器都无效
- 不要复用全局
@primary-color或$theme-colors—— 改分页不该让按钮、导航栏跟着变色
最容易被忽略的是：浏览器开发者工具里看到 .page-item.active .page-link 规则生效了，但颜色还是不对——大概率是 :focus 或 :hover 状态没同步改，导致鼠标移开或 Tab 切换后立刻回退。得把这五个状态当成一个整体来维护。
