必须将.active类加在<li class="page-item">上而非，因Bootstrap 5的CSS选择器.page-item.active .page-link仅匹配父元素含.active的.page-link；若直接加在上则完全不生效。
必须把 .active 类加在 <li class="page-item"> 上，而不是 <a class="page-link">；否则所有高亮样式（背景、边框、圆角）都会失效。
为什么 .active 加在 page-link 上没反应
Bootstrap 5 的 CSS 选择器是 .page-item.active .page-link，它只匹配「父元素有 .active 的 .page-link」。如果直接给 <a> 加 .active，这个选择器完全不命中，连默认背景色都不会变。
常见错误写法：<li class="page-item"><a class="page-link active">2</a></li>
正确写法：<li class="page-item active"><a class="page-link">2</a></li>
- Bootstrap 4 和 5 都遵循这一规则；Bootstrap 3 是旧逻辑（加在
<a>上），混用模板时特别容易翻车 - 如果用了 JS 动态切换当前页，记得同步操作
<li>元素的.active类，不是<a> - 禁用态同理：
<li class="page-item disabled">才能真正压制:hover和点击行为
重写 .page-item.active .page-link 的关键样式项
只改 background-color 不够——当前页的视觉反馈包含多个状态叠加：默认、悬停、聚焦、禁用联动。漏掉任意一项，鼠标移过去或键盘 tab 过来时就会“跳一下”。
- 必须覆盖：
background-color、border-color、color（文字色）、box-shadow（聚焦轮廓） - 推荐优先用 CSS 变量，比如
--bs-pagination-bg、--bs-pagination-border-color，前提是你的自定义 CSS 在 Bootstrap 样式表之后加载 - 如果用硬写值，注意加足够优先级，例如：
.my-pagination .page-item.active .page-link，避免被默认样式覆盖
示例（精简版）：
.my-pagination .page-item.active .page-link {<br>
background-color: #2a4a7c;<br>
border-color: #1a3a6c;<br>
color: #fff;<br>
box-shadow: 0 0 0 0.2rem rgba(42, 74, 124, 0.25);<br>
}
如何让 active 状态同时防误点
光高亮不够，用户可能狂点当前页导致重复请求或页面抖动。稳妥做法是让当前页项也带 .disabled，但保留视觉高亮。
立即学习“前端免费学习笔记（深入）”；
- 结构写成：
<li class="page-item active disabled"><a class="page-link">3</a></li> - 这样既触发
.page-item.active .page-link的高亮样式，又通过.page-item.disabled .page-link抑制:hover和点击穿透 - 注意：不要只加
.disabled而漏掉.active，否则高亮就没了 - JS 监听时，建议用事件委托并检查
event.target.closest('.disabled')提前 return
响应式下 .pagination-sm 的 active 样式为何不缩放
.pagination-sm 默认只在 ≥576px（sm 断点）生效，小屏下它根本没被应用，所以你重写的 .page-item.active .page-link 会按默认尺寸渲染，看起来“没变小”。
- 确认类名加在
<ul>上：<ul class="pagination pagination-sm">，不是加在<nav>或<li>上 - 想强制全屏都小号，可以覆盖：
.pagination-sm .page-link { padding: 0.25rem 0.5rem; font-size: 0.875rem; } - 如果项目禁用了 Sass 编译，直接调
min-width或line-height更可靠，比依赖断点更可控
最易被忽略的一点：所有自定义样式必须在 Bootstrap CSS 之后加载，否则变量未定义、选择器被覆盖，.active 就只是个摆设。
