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 classmy-paginationul classpagination.../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 治标不治本。 有道翻译AI助手 有道翻译提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、葡萄牙语、越南语、印尼语、意大利语、荷兰语、泰语全文翻译、网页翻译、文档翻译、PDF翻