怎样在Bootstrap 5中通过CSS覆写分页组件的悬停高亮色？-css教程-PHP中文网

直接写.page-link:hover没反应，主因是bootstrap 5默认使用高权重选择器（如a.page-link[href]:hover）控制悬停态，导致自定义规则被覆盖；必须同时覆盖:hover、:focus、.active、:disabled等全部五种状态，并注意.page-item.active嵌套结构及css变量适配。

怎样在bootstrap 5中通过css覆写分页组件的悬停高亮色？

为什么直接写 `.page-link:hover` 没反应

不是你的 CSS 没加载，而是 Bootstrap 5 默认用高权重选择器（比如 a.page-link[href]:hover）控制悬停态，单写 .page-link:hover 权重不够，浏览器开发者工具里会看到样式被划掉。更隐蔽的是：Bootstrap 5.3+ 开始部分状态（如禁用、激活）还依赖 CSS 变量计算，硬覆盖选择器可能被变量值回退。

必须一次性覆盖全部交互状态

分页链接有五种视觉状态，漏掉任意一个都会导致“点一下变蓝、移开又变灰”这类不一致现象：

.page-link：默认态（含文字色、背景、边框）
.page-link:hover, .page-link:focus：悬停与键盘聚焦（必须合并写，否则 Tab 导航无反馈）
.page-item.active .page-link：当前页（注意是 .page-item.active 嵌套，不是 .page-link.active）
.page-link:disabled：禁用态（首/末页常处于此状态，容易忽略）

示例（放在自定义 CSS 文件中，且该文件 <link> 必须在 Bootstrap CSS 之后）：

VPS Bootstrap

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

下载

.pagination .page-link {
  color: #4a6fa5;
  background-color: #f8fafc;
  border-color: #e2e8f0;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
  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+ 支持 --bs-pagination-color、--bs-pagination-bg 等变量，但它们**只影响默认态**，:hover 和 .active 仍需手动补全：

全局改（所有分页）：:root { --bs-pagination-bg: #2563eb; --bs-pagination-color: #fff; }
局部改（如仅导航栏内分页）：.navbar .pagination { --bs-pagination-bg: #16a34a; }
必须同步声明 .pagination .page-link:hover { background-color: var(--bs-pagination-bg); }，否则悬停还是默认色
深色模式下需额外加：[data-bs-theme="dark"] { --bs-pagination-bg: #374151; }