bootstrap 5分页样式应在自定义class（如.my-pagination）下通过高优先级选择器重写，需同时设置.page-link默认、:hover、.page-item.active .page-link及:focus状态，并推荐使用css变量--bs-pagination-bg等实现主题化。
Bootstrap分页默认样式在哪改
Bootstrap 5 的分页（Pagination）样式由 .pagination 及其子类（如 .page-link、.page-item）控制，**不建议直接覆盖 Bootstrap 的 CSS 文件**——容易被 CDN 更新冲掉，也难维护。最稳妥的方式是用自定义 class + 更高优先级选择器重写。
- 优先用独立 class 包裹分页组件，比如
<nav class="my-pagination"><ul class="pagination">...</ul></nav> - 然后在 CSS 中用
.my-pagination .page-link这类路径精准定位，避免污染全局.page-link - 注意：Bootstrap 5 默认用
rem和 CSS 变量（如--bs-pagination-bg），修改变量比硬写background-color更灵活，但需确保你的 CSS 在 Bootstrap 样式之后加载
改背景色和边框的正确写法（含 hover/active 状态）
只改 .page-link 的 background-color 和 border 不够——点击、悬停、当前页状态都有独立样式，漏掉就会看起来“断层”。必须一并处理：
-
.page-link：默认状态（背景、边框、文字色） -
.page-link:hover：鼠标移入时的背景与边框变化 -
.page-item.active .page-link：当前页，注意是.page-item上有active类，不是.page-link -
.page-link:focus：键盘聚焦或点击后残留 outline，常需用outline: none或重设box-shadow
示例（纯 CSS）：
.my-pagination .page-link {
background-color: #4a6fa5;
border-color: #3a5a8c;
color: white;
}
.my-pagination .page-link:hover {
background-color: #3a5a8c;
border-color: #2a4a7c;
}
.my-pagination .page-item.active .page-link {
background-color: #2a4a7c;
border-color: #1a3a6c;
color: white;
}
.my-pagination .page-link:focus {
box-shadow: 0 0 0 0.2rem rgba(74, 111, 165, 0.25);
}
为什么加 !important 有时也不生效
不是优先级不够，而是 Bootstrap 5 大量使用属性选择器（如 [href]）和 :is() 伪类，导致你写的 .page-link 规则实际权重低于它自带的 a.page-link[href]。这时候光靠 !important 治标不治本。
- 检查浏览器开发者工具里，被划掉的样式是不是因为选择器权重低（看 computed 面板里 “specificity” 值）
- 提升选择器权重更可靠：比如把
.my-pagination .page-link改成.my-pagination > .pagination > .page-item > .page-link - 或者直接复写 Bootstrap 的 CSS 变量（推荐）：
.my-pagination { --bs-pagination-bg: #4a6fa5; --bs-pagination-border-color: #3a5a8c; }，再让.page-link继承这些变量
移动端分页按钮太小？别只调 font-size
Bootstrap 分页在小屏下默认会缩小按钮尺寸，仅调 font-size 会让文字撑出按钮、边框错位。真正要动的是 padding 和 min-width。
- 用
padding控制内边距，比如padding: 0.375rem 0.75rem（对应 Bootstrap 的 sm 尺寸） - 加
min-width: 2rem防止数字 1/2 被压扁 - 如果需要响应式差异，用媒体查询包裹整套规则，而不是只改 font-size
- 注意：Bootstrap 5 的
.pagination-lg和.pagination-sm是通过修改 padding 和 font-size 实现的，可直接复用或参考其数值
.page-item.active 和 .page-link 是两个分离的 DOM 元素——背景色得写在 .page-link 上，但激活态的判断逻辑在父级 .page-item。漏掉这层嵌套关系，样式就永远对不上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
