直接改 .page-link 背景色无效，因 Bootstrap 5 使用高权重选择器（如 a.page-link[href]）；应提升 specificity，用自定义容器类（如 .my-pagination）覆盖全部五种状态样式，并优先使用 CSS 变量或内置尺寸类。
直接改 .page-link 背景色基本无效——不是你写错了，是 Bootstrap 5 默认用 a.page-link[href] 这类高权重选择器，比单类名优先级高得多。浏览器开发者工具里看到样式被划掉，八成就是这个原因。
为什么 .page-link { background-color: red } 不生效
Bootstrap 5 的分页样式大量依赖属性选择器（如 a.page-link[href]）和组合选择器（如 .page-item.active .page-link），它们的 CSS 权重天然高于裸写 .page-link。加 !important 只能压住一条规则，但压不住 :hover、:focus、.page-item.active .page-link 等状态，结果就是“鼠标一移变蓝，点一下跳回红”。
正确做法是提升选择器 specificity：
- 给外层容器加自定义 class，比如
- 所有样式都基于
.my-pagination .page-link路径写，确保覆盖原生规则 - 检查 computed styles，确认真正生效的选择器是不是
a.page-link[href]或.pagination > li > a类型
必须同时覆盖的五个状态选择器
漏掉任意一个，交互时就会视觉断裂。重点不是“怎么写”，而是“写全哪几个”：
-
.my-pagination .page-link：默认背景、边框、文字色 -
.my-pagination .page-link:hover, .my-pagination .page-link:focus：合并写更安全，避免重复；:focus关系可访问性，不能省 -
.my-pagination .page-item.active .page-link：注意是.page-item有active类，不是.page-link.active -
.my-pagination .page-item.disabled .page-link：首/末页常处于该状态，禁用态颜色不一致会显得突兀 -
.my-pagination .page-link:visited（可选但推荐）：防止点击后颜色意外变化
用 CSS 变量比硬写颜色更稳，但要注意版本兼容
Bootstrap 5.2+ 引入了 --bs-pagination-bg、--bs-pagination-border-color、--bs-pagination-color 等变量，但它们只在 v5.3+ 全面生效到所有状态。旧版仍需手动覆盖选择器。
推荐写法（Bootstrap 样式加载后）：
:root {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-color: #fff;
--bs-pagination-padding-y: 0.375rem;
--bs-pagination-padding-x: 0.75rem;
--bs-pagination-margin-x: 0.375rem;
}
注意：--bs-pagination-margin-x 是 v5.3+ 才支持的间距变量，v5.0–v5.2 需退回到 .my-pagination .page-item:not(:last-child) { margin-right: 0.375rem; }，且要额外处理 :last-child 是否多出空白。
尺寸、间距、圆角别碰 height 和 margin
硬设 height 或 margin 是最常见翻车点：
-
.page-link { height: 40px }会压制padding和line-height协同效果，导致 active 状态下边框“浮起”或文字截断 -
.page-item { margin-right: 0.5rem }会破坏 Flex 对齐，小屏下容易换行错位 - 圆角优先用
.rounded-pill或.rounded-2工具类，而不是手写border-radius: 8px
真正可控的入口是变量：--bs-pagination-padding-y、--bs-pagination-font-size、--bs-pagination-margin-x。或者用内置尺寸类：.pagination-sm / .pagination-lg，它们联动调整多个属性，不会失配。
最容易被忽略的其实是 aria-current="page" 和 tabindex="-1" 的同步更新——样式再现代，无障碍链断了，屏幕阅读器就识别不出当前页。这不是 CSS 能解决的，但它是样式生效的前提条件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
