直接写.page-link:hover没反应，主因是Bootstrap 5默认使用高权重选择器（如a.page-link[href]:hover）控制悬停态，导致自定义规则被覆盖；必须同时覆盖:hover、:focus、.active、:disabled等全部五种状态，并注意.page-item.active嵌套结构及CSS变量适配。
为什么直接写 .page-link:hover 没反应
不是你的 CSS 没加载，而是 Bootstrap 5 默认用高权重选择器（比如 a.page-link[href]:hover）控制悬停态，单写 .page-link:hover 权重不够，浏览器开发者工具里会看到样式被划掉。更隐蔽的是：Bootstrap 5.3+ 开始部分状态（如禁用、激活）还依赖 CSS 变量计算，硬覆盖选择器可能被变量值回退。
必须一次性覆盖全部交互状态
分页链接有五种视觉状态，漏掉任意一个都会导致“点一下变蓝、移开又变灰”这类不一致现象：
-
.page-link：默认态（含文字色、背景、边框） -
.page-link:hover, .page-link:focus：悬停与键盘聚焦（必须合并写，否则 Tab 导航无反馈） -
.page-item.active .page-link：当前页（注意是.page-item.active嵌套，不是.page-link.active） -
.page-link:disabled：禁用态（首/末页常处于此状态，容易忽略）
示例（放在自定义 CSS 文件中，且该文件 <link> 必须在 Bootstrap CSS 之后）：
.pagination .page-link {
color: #4a6fa5;
background-color: #f8fafc;
border-color: #e2e8f0;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
color: #2563eb;
background-color: #edf2f7;
border-color: #cbd5e0;
}
.pagination .page-item.active .page-link {
color: #fff;
background-color: #2563eb;
border-color: #2563eb;
}
.pagination .page-link:disabled {
color: #a0aec0;
background-color: #f8fafc;
opacity: 0.6;
}
用 CSS 变量替代选择器覆盖更可靠
Bootstrap 5.3+ 支持 --bs-pagination-color、--bs-pagination-bg 等变量，但它们**只影响默认态**，:hover 和 .active 仍需手动补全：
立即学习“前端免费学习笔记（深入）”；
- 全局改（所有分页）：
:root { --bs-pagination-bg: #2563eb; --bs-pagination-color: #fff; } - 局部改（如仅导航栏内分页）：
.navbar .pagination { --bs-pagination-bg: #16a34a; } - 必须同步声明
.pagination .page-link:hover { background-color: var(--bs-pagination-bg); }，否则悬停还是默认色 - 深色模式下需额外加：
[data-bs-theme="dark"] { --bs-pagination-bg: #374151; }
移动端点击反馈失效的真正原因
真机上点不动、没高亮，大概率不是 hover 写错了，而是：
- 只写了
:hover，没写:focus—— Android Chrome 把点击映射为 focus，iOS Safari 有时延迟触发 - 用了
outline: none却没清box-shadow，导致默认蓝色焦点环还在，盖住你设的背景 - hover 时改了
border或padding，引发盒模型抖动，鼠标瞬间“离开”按钮，hover 失效后又立刻恢复，形成闪动循环
安全做法是：常态用 border: 2px solid transparent 占位，hover 时只改 border-color；或统一用 outline + outline-offset 控制焦点样式，不扰动布局。
