直接覆盖 .page-link 的 background-color 和 border 不会生效，因为 Bootstrap 5 使用 CSS 变量（如 --bs-pagination-bg）控制主题色，且 hover、active、focus 状态样式独立定义，漏掉任一状态会导致视觉断裂；必须统一覆盖四类状态或通过 :root 重设变量。
直接覆盖 .page-link 的 background-color 和 border 不会生效——因为 Bootstrap 5 默认用 CSS 变量控制主题色，且 hover / active / focus 状态样式是独立定义的，漏掉任一状态都会导致视觉断裂。
为什么改了 .page-link 背景色却没变？
Bootstrap 5 把颜色、圆角、边框等都抽成 CSS 变量（如 --bs-pagination-bg、--bs-pagination-border-color），默认样式里写的是变量引用，不是硬编码值。你只改 background-color，它会被变量值覆盖。
- 检查浏览器开发者工具里
.page-link计算后的 background-color，大概率显示为var(--bs-pagination-bg) - 要么在 Bootstrap CSS 加载之后，用
:root重设变量（推荐）：:root { --bs-pagination-bg: #4a6fa5; --bs-pagination-border-color: #3a5a8c; --bs-pagination-color: #fff; } - 要么用更高优先级选择器强制覆盖（不推荐长期维护）：
.my-pagination .page-link { background-color: #4a6fa5 !important; }
hover / active / focus 状态必须一起处理
只写 .page-link 默认样式，鼠标移上去还是默认蓝，点中当前页还是浅灰——这不是“没生效”，而是你没告诉浏览器“这些状态该长什么样”。
-
.page-link:hover：悬停时背景和边框要同步变深 -
.page-item.active .page-link：注意 selector 是.page-item.active包裹.page-link，不是.page-link.active -
.page-link:focus：别只清outline，建议用box-shadow做可访问性聚焦提示 - 示例片段（无
!important，靠选择器权重）：.my-pagination .page-link { background-color: #4a6fa5; border-color: #3a5a8c; color: #fff; }<br>.my-pagination .page-link:hover { background-color: #3a5a8c; border-color: #2a4a7c; }<br>.my-pagination .page-item.active .page-link { background-color: #2a4a7c !important; border-color: #1a3a6c; color: #fff; }<br>.my-pagination .page-link:focus { outline: none; box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25); }
响应式紧凑布局怎么调？
默认分页项间距大、移动端容易换行或溢出，但不需要改 Sass 或写媒体查询——Bootstrap 5 内置工具类就能解决。
立即学习“前端免费学习笔记（深入）”；
- 缩小整体间距：
gap-1替代默认gap-2（加在<ul class="pagination">上） - 隐藏中间页码（如只显示「上一页 1 … 5 6 7 … 下一页」）：
d-none d-md-flex加在对应<li class="page-item">上 - 首尾按钮微调内边距：
px-3比默认更紧凑，避免文字被截 - 居中不用
margin: 0 auto——justify-content-center是 Flex 布局原生方案，且兼容响应式
圆角/阴影/禁用态容易被忽略的细节
圆角和阴影不是“锦上添花”，而是影响点击反馈和视觉层级的关键；禁用态若只加 disabled 类，键盘用户仍能 Tab 进去并触发焦点样式。
- 圆角统一用
border-radius，别只设.page-link，要同步.page-item（防止相邻项圆角冲突） - 禁用态必须三件套：
class="page-item disabled"+tabindex="-1"+aria-disabled="true" - 阴影建议用
box-shadow而非text-shadow，后者对链接文字无效 - 如果用了深色背景（如
bg-dark），记得配pagination-dark类，否则文字会看不见
真正难的不是写多少 CSS，而是记住哪些状态必须成组出现、哪些属性必须随 Bootstrap 变量联动、哪些 HTML 属性是可访问性刚需——漏掉任何一个，用户看到的就不是“美化”，而是“错乱”。
