直接改--bs-pagination-bg无效，因Bootstrap 5中该变量仅控制.pagination容器背景，.page-link背景被硬编码为var(--bs-white)；真正生效的是.page-item.active .page-link选择器，须显式覆盖其background-color、border-color和color，并同步处理:hover、:focus、.disabled等状态。
直接改 --bs-pagination-bg 没用，真正起作用的是 .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-link的 computedbackground-color，大概率显示为rgb(255, 255, 255)或var(--bs-white)，而非你设的变量值
.page-item.active .page-link 必须单独写，不能简写成 .page-link.active
Bootstrap 把“当前页”样式绑定在 .page-item 元素上，不是 .page-link。漏掉 .page-item 这层，样式永远不触发。
- HTML 结构是
<li class="page-item active"><a class="page-link">1</a></li>，不是<a class="page-link active"> - 只写
.page-link.active或.page-link:active都无效——前者类不存在，后者是鼠标按下瞬间状态，不是“当前页” - 必须用完整路径：
.my-pagination .page-item.active .page-link（加自定义容器更安全）
四个状态一个都不能少：默认、悬停、当前页、禁用
只覆盖 .page-item.active .page-link，其他状态仍走 Bootstrap 默认，交互时会闪、回退、或颜色断裂。
-
.my-pagination .page-link：默认背景、边框、文字色 -
.my-pagination .page-link:hover：悬停时背景和边框要同步变深，别只改背景 -
.my-pagination .page-item.active .page-link：当前页，注意嵌套层级 -
.my-pagination .page-item.disabled .page-link：首/末页常禁用，不处理会在深色模式下几乎不可读
示例（无 !important，靠选择器权重）：
.my-pagination .page-link {
background-color: #4a6fa5;
border-color: #3a5a8c;
color: white;
}
.my-pagination .page-link:hover {
background-color: #3a5a8c;
border-color: #2a4a7c;
}
.my-pagination .page-item.active .page-link {
background-color: #2a4a7c;
border-color: #1a3a6c;
color: white;
}
.my-pagination .page-item.disabled .page-link {
background-color: #e9ecef;
border-color: #dee2e6;
color: #6c757d;
}
深色模式和加载顺序是隐形门槛
自定义 CSS 必须在 Bootstrap 的 CSS <link> 之后加载，否则变量未定义、选择器被覆盖；用了深色模式还得手动补全 @media (prefers-color-scheme: dark)。
- 把自定义样式放在
<head>最底部，或确保<link rel="stylesheet" href="bootstrap.css">在前 - 深色模式下，
.page-item.active .page-link的背景色可能需要更暗或更高对比度，比如#1a3a6c替代#2a4a7c - 别依赖
data-bs-theme="dark"自动切换——Bootstrap 5.3+ 的分页变量不自动响应它，必须显式重写
最易被忽略的是：CSS 文件加载顺序错了，所有样式都白写；以及禁用态没单独处理，导致“首页不可点”时颜色错乱、可访问性下降。
