CSS如何修改Bootstrap分页条样式_自定义分页项的背景色与边框

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