直接改 .page-link 背景色无效，因 bootstrap 5 使用高权重选择器 a.page-link[href]，且需同时覆盖 .page-link、:hover、.page-item.active .page-link 和 :focus 四状态，或通过 :root 重设 --bs-pagination-bg 等变量（v5.3+ 全面生效）。
为什么直接改 .page-link 背景色没反应
不是你写错了，是 Bootstrap 5 默认用 a.page-link[href] 这类高权重选择器，比单类名 .page-link 权重高。浏览器开发者工具里看到样式被划掉，基本就是这个原因。别急着加 !important——它可能压住默认态，但压不住 :hover、:focus 和 .page-item.active .page-link，结果变成“鼠标一移就变蓝，点一下又跳回原色”。
必须同时覆盖的四个状态选择器
漏掉任意一个，交互时就会视觉断裂。重点不是“怎么写”，而是“写全哪几个”：
-
.my-pagination .page-link：默认背景、边框、文字色 -
.my-pagination .page-link:hover：悬停时同步变深，别只调背景不调边框 -
.my-pagination .page-item.active .page-link：注意是.page-item上有active类，不是.page-link.active -
.my-pagination .page-link:focus：别只清outline，用box-shadow做可访问性聚焦提示
禁用态（.page-item.disabled .page-link）也建议一并处理，尤其首/末页常处于该状态。
用 CSS 变量比硬写颜色更稳
Bootstrap 5.2+ 把颜色抽成 --bs-pagination-bg、--bs-pagination-border-color 等变量。你只改 background-color，它会被 var(--bs-pagination-bg) 覆盖。推荐在 Bootstrap 样式加载后，用 :root 重设：
:root {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-color: #fff;
}
这样所有状态自动响应，不用重复写四遍颜色值。但注意：变量只在 v5.3+ 全面生效，旧版仍需手动覆盖选择器。
间距和尺寸别碰 margin 和 height
分页项之间间隙由 --bs-pagination-margin-x 控制（v5.3+），不是靠 margin-right。硬写 .page-item { margin-right: 0.5rem } 会破坏 Flex 对齐，小屏下容易换行错位。
按钮大小也别设 height——它会压制 padding 和 line-height 协同效果，导致 active 状态下边框“浮起”或文字截断。优先用内置类：.pagination-sm 或 .pagination-lg，或重设变量：--bs-pagination-padding-y、--bs-pagination-font-size。
最易被忽略的其实是 aria-current="page" 和 tabindex="-1" 的同步更新——样式再现代，无障碍链断了，对部分用户就是不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
