Bootstrap怎么设置分页组件Pagination的选中背景色-Bootstrap教程-PHP中文网

直接改--bs-pagination-bg无效，因bootstrap 5中该变量仅控制.pagination容器背景，.page-link背景被硬编码为var(--bs-white)；真正生效的是.page-item.active .page-link选择器，须显式覆盖其background-color、border-color和color，并同步处理:hover、:focus、.disabled等状态。

bootstrap怎么设置分页组件pagination的选中背景色

直接改 --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 的 computed background-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"></a>
只写 .page-link.active 或 .page-link:active 都无效——前者类不存在，后者是鼠标按下瞬间状态，不是“当前页”
必须用完整路径：.my-pagination .page-item.active .page-link（加自定义容器更安全）

四个状态一个都不能少：默认、悬停、当前页、禁用

只覆盖 .page-item.active .page-link，其他状态仍走 Bootstrap 默认，交互时会闪、回退、或颜色断裂。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

.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;
}