应优先使用 :root 变量覆盖分页样式（如 --bs-pagination-bg），v5.3+ 有效；旧版本需完整定义 .my-pagination .page-link 的默认、:hover、.page-item.active .page-link、:focus 四种状态，并同步处理 aria-current、aria-disabled 和 tabindex 以保障可访问性。
直接改 .page-link 背景色为什么没反应
不是选择器写错，是权重不够。Bootstrap 5 默认用 a.page-link[href] 这类带标签名+属性的选择器，比单写 .page-link 权重高。你在开发者工具里看到样式被划掉，基本就是这个原因。硬加 !important 容易压住默认态，但压不住 :hover 或 .page-item.active .page-link，结果鼠标一移就跳色。
必须同时覆盖的四个状态选择器
漏掉任意一个，交互时就会视觉断层。重点不是“怎么写”，而是“写全哪几个”：
-
.my-pagination .page-link：默认背景、边框、文字色（别漏设，否则 hover 会回退到 Bootstrap 浅灰） -
.my-pagination .page-link:hover：悬停时同步变深，别只调背景不调边框 -
.my-pagination .page-item.active .page-link：注意active类在.page-item上，不是.page-link -
.my-pagination .page-link:focus：别只清outline，用box-shadow做可访问性聚焦提示
用 :root 变量改色更稳（v5.3+ 推荐）
Bootstrap 5.3+ 把分页颜色抽成 --bs-pagination-bg、--bs-pagination-border-color 等变量。你只改 background-color，它会被 var(--bs-pagination-bg) 覆盖。推荐在 Bootstrap CSS 之后加载自定义 CSS：
:root {
--bs-pagination-bg: #4a6fa5;
--bs-pagination-border-color: #3a5a8c;
--bs-pagination-color: #fff;
}
这样所有状态自动响应，不用重复写四遍颜色值。但注意：旧版本（v5.2 及以下）不支持该变量全面生效，得回退到选择器方案。
禁用态和语义属性容易被忽略
只加 .disabled 类，视觉上灰了，但键盘用户仍能 Tab 进去，读屏软件也认为它可操作。必须同步处理：
- 禁用项：给
<a></a>或<button></button>加tabindex="-1"+aria-disabled="true" - 当前页：必须加
aria-current="page"，.active类只管样式，不管语义 - 自定义 CSS 文件必须在 Bootstrap CSS 之后加载，否则变量未定义或选择器被覆盖
动态切换页码时，如果忘了移除上一页的 aria-current="page"，会出现多个“当前页”，可访问性检测直接报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
