如何修改Bootstrap分页组件的颜色_覆盖pagination链接的CSS样式-css教程-PHP中文网

直接覆盖 .pagination .page-link 各状态样式（默认、:hover、.active、:disabled）才能统一颜色，仅改基础类会导致状态不一致；推荐用 css 变量配合手动补全 :hover 背景，并添加 touch-action: manipulation 解决移动端点击反馈问题。

如何修改bootstrap分页组件的颜色_覆盖pagination链接的css样式

直接覆盖 .pagination .page-link 的 CSS 样式就能改颜色，但必须确保你的规则在 Bootstrap CSS 之后加载，且要同步处理 .active、:hover 和禁用状态，否则点击后颜色会回退或失效。

为什么只改 `.page-link` 背景色没用

Bootstrap 分页的每个数字项本质是 <a></a> 标签，样式由多个状态叠加控制：.page-link（默认）、.page-link:hover（悬停）、.page-item.active .page-link（当前页）、.page-link:disabled（禁用）。只改基础类，其他状态仍走默认蓝/灰，视觉上就“不统一”甚至“闪一下变回去”。

常见错误现象：点中某页后颜色立刻恢复成默认蓝，或鼠标移上去变色但移开就还原
根本原因是选择器权重不够，或者没覆盖所有状态伪类
Bootstrap 5.3+ 使用 CSS 变量（如 --bs-pagination-color、--bs-pagination-bg），但这些变量只影响基础样式，.active 和 :hover 仍需单独声明

正确覆盖 `.page-link` 颜色的写法

推荐在自定义 CSS 文件中写，且该文件必须放在 Bootstrap CSS <link> 之后。不用 !important，靠选择器权重和顺序即可生效。

.pagination .page-link：设默认文字色、背景色、边框
.pagination .page-link:hover：设悬停背景和文字色（别漏）
.pagination .page-item.active .page-link：设当前页的背景和文字色（注意嵌套层级）
.pagination .page-link:disabled：设禁用态透明度或灰阶，保持可读性

示例：

.pagination .page-link {
  color: #4a6fa5;
  background-color: #f8fafc;
  border-color: #e2e8f0;
}
.pagination .page-link:hover {
  color: #2563eb;
  background-color: #edf2f7;
  border-color: #cbd5e0;
}
.pagination .page-item.active .page-link {
  color: #fff;
  background-color: #2563eb;
  border-color: #2563eb;
}
.pagination .page-link:disabled {
  color: #a0aec0;
  background-color: #f8fafc;
  opacity: 0.6;
}

用 CSS 变量批量控制分页颜色（Bootstrap 5.3+）

如果你项目已启用 CSS 变量方案，可以直接重设 :root 下的分页相关变量，比写一堆选择器更简洁，也便于主题切换。

VPS Bootstrap

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

下载

--bs-pagination-color：默认文字色
--bs-pagination-bg：默认背景色
--bs-pagination-border-color：默认边框色
--bs-pagination-hover-color：悬停文字色（注意：无 hover-bg 变量，需额外覆盖 :hover）
--bs-pagination-active-color 和 --bs-pagination-active-bg：当前页颜色

示例（全局生效）：

:root {
  --bs-pagination-color: #4a6fa5;
  --bs-pagination-bg: #f8fafc;
  --bs-pagination-border-color: #e2e8f0;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #2563eb;
  --bs-pagination-active-border-color: #2563eb;
}

⚠️ 注意：--bs-pagination-hover-color 存在，但 Bootstrap 源码里没定义对应的 --bs-pagination-hover-bg，所以仍需手动加 .page-link:hover 规则补全背景色。