Bootstrap 4 中 .page-link.active 不生效是因为 .active 类实际加在 .page-item 上，正确选择器是 .page-item.active .page-link；需同时覆盖默认、hover/focus、active、disabled 及移动端反馈五种状态，并确保 CSS 加载顺序在 Bootstrap 之后。
直接改 .page-link.active 没用——Bootstrap 4 把 .active 类加在 .page-item 上，不是 .page-link 元素本身。
为什么 .page-link.active 不生效
浏览器开发者工具里看到你的样式被划掉，大概率是选择器权重不够。Bootstrap 4 默认用的是 .pagination > .page-item > .page-link 这类带层级和元素类型的选择器，天然比单个类名高权重。只写 .page-link.active 根本匹配不到真实 DOM 结构。
-
.page-item.active .page-link才是正确路径：激活状态在父容器上，样式要透下去 - 漏掉
:hover或:focus，鼠标移开或键盘切换时颜色会闪回默认蓝 - 没覆盖
.page-item.disabled .page-link，首/末页禁用后背景可能突兀
必须覆盖的五个关键状态
分页按钮视觉一致性取决于这五种状态是否全部声明，缺一不可：
-
.pagination .page-link：默认背景、边框、文字色 -
.pagination .page-link:hover和.pagination .page-link:focus：建议合并写，避免重复；:focus是无障碍必需项 -
.pagination .page-item.active .page-link：当前页背景色核心规则，注意是后代关系，不是.page-link.active -
.pagination .page-item.disabled .page-link：禁用态建议加opacity: 0.6或灰阶，别只靠颜色区分
CSS 顺序和加载位置很关键
你的自定义 CSS 文件必须放在 Bootstrap CSS 的 <link> 标签之后，否则规则不会生效。不用 !important，靠顺序 + 选择器精度就能压住默认样式。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
.pagination .page-item.active .page-link { background-color: #0d47a1; border-color: #0a3a82; color: white; } - 如果项目里还有其他第三方 CSS（比如某个 UI 库），检查它是否在你样式之前加载，导致覆盖失败
- 移动端点击反馈弱？可加
touch-action: manipulation到.page-link提升响应感
最容易被忽略的是禁用态和键盘聚焦态——它们不常被手动测试，但用户真实使用中会暴露问题。写完记得用 Tab 键切一遍，再点首/末页看禁用效果是否协调。
