直接写 .page-link { background-color: red } 不生效，是因为 Bootstrap 5 使用高权重选择器如 a.page-link[href]，其 CSS 权重高于单类选择器；需用 .my-pagination .page-link 等更具体选择器覆盖全部状态（默认、hover、focus、active、disabled），并推荐通过 CSS 变量 --bs-pagination-bg 等实现主题化。
为什么直接写 .page-link { background-color: red } 不生效
不是你的 CSS 写错了，而是 Bootstrap 5 默认用 a.page-link[href] 这类高权重选择器，比你单写 .page-link 多了属性匹配和元素类型，CSS 权重天然更高。浏览器开发者工具里看到样式被划掉，大概率是这个原因。
别急着加 !important——它可能压住一条规则，但压不住所有状态（比如 :hover、:focus、.active），最后变成“点一下变蓝，移开又变红”的诡异效果。
- 检查 computed styles 里真正生效的选择器，看是不是
a.page-link或.pagination > li > a类型 - 优先用更具体的选择器，比如
.my-pagination .page-link，而不是裸写.page-link - Bootstrap 5.2+ 支持 CSS 变量，但
.page-link默认不响应--bs-pagination-bg，得手动绑定（见下条）
怎么安全覆盖 .page-link 的全部状态
分页链接有默认态、悬停、聚焦、激活、禁用五种常见状态，漏掉任意一个，交互时就会回退到 Bootstrap 原色。必须一次性写全：
.my-pagination .page-link {
background-color: #4a6fa5;
border-color: #3a5a8c;
color: white;
}
.my-pagination .page-link:hover,
.my-pagination .page-link:focus {
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;
}
- 注意
.page-item.active .page-link是两个类嵌套，不是.page-link.active -
:focus和:hover建议合并写，避免重复声明；键盘用户依赖:focus，不能省 - 禁用态（
.disabled）容易被忽略，但实际分页首/末页常处于该状态
用 CSS 变量实现主题化是否可行
Bootstrap 5.2+ 确实引入了 --bs-pagination-bg 等变量，但它们**只在部分组件内部被 var(--bs-pagination-bg) 调用**。.page-link 的默认样式仍硬编码为 #fff 和 #dee2e6，不读这些变量。
立即学习“前端免费学习笔记（深入）”；
想用变量驱动，得自己把它们“接进来”：
.my-pagination .page-link {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-color: white;
background-color: var(--bs-pagination-bg);
border-color: var(--bs-pagination-border-color);
color: var(--bs-pagination-color);
}
- 变量必须定义在作用域内（比如
.my-pagination元素上），否则var()查不到 - 这种方式适合多主题切换，比如配合
@media (prefers-color-scheme: dark)动态改变量值 - 但要注意：旧版 Bootstrap（
最省事但易踩坑的写法：直接改 :root 变量
如果你项目里所有分页都用同一套颜色，且确定用的是 Bootstrap 5.2+，可以尝试全局覆盖变量：
:root {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-color: white;
--bs-pagination-hover-bg: #3a5a8c;
--bs-pagination-hover-border-color: #2a4a7c;
--bs-pagination-active-bg: #2a4a7c;
--bs-pagination-active-border-color: #1a3a6c;
}
但这里有个关键限制：这些变量只对原生 Bootstrap 分页组件生效，且前提是它内部确实用了这些变量。翻源码会发现，目前只有 .pagination 容器级样式（如间距、字体）用了变量，.page-link 的颜色逻辑仍靠传统 CSS 规则硬写。
- 所以光设
--bs-pagination-bg，.page-link的背景色大概率不变 - 除非你同时修改 Bootstrap 源码或用 Sass 重编译，否则变量方案在这里是“看起来很美，实际不顶用”
- 真要一劳永逸，还是老实用高权重选择器 + 全状态覆盖最稳
