直接写 .page-link { color: red } 不生效，因 Bootstrap 4 默认使用高权重选择器（如 a.page-link）；须用 .pagination .page-link 等具体选择器覆盖默认、hover、focus、active、disabled 五种状态，并配合 JS 阻断禁用链接的默认行为。
直接写 .page-link { color: red } 大概率不生效——不是你写错了，是 Bootstrap 4 的默认选择器权重更高，比如它用的是 a.page-link 或 .pagination > .page-item > .page-link 这类组合选择器。
为什么 .page-link 单独写没反应
浏览器开发者工具里看到你的样式被划掉，基本就是这个原因。Bootstrap 4 的 CSS 规则带元素类型（a）和层级（>），天然比单个类名权重高。加 !important 能压住一条，但压不住所有状态（比如 :hover、.active、.disabled），结果就是“点一下变蓝，移开又灰”，交互错乱。
你应该做的是：用更具体的选择器，一次性覆盖全部状态。
必须覆盖的五种状态及其对应选择器
分页按钮有五个关键视觉状态，漏一个就可能回退到 Bootstrap 默认色：
-
.pagination .page-link—— 默认态 -
.pagination .page-link:hover—— 鼠标悬停 -
.pagination .page-link:focus—— 键盘聚焦（无障碍必需，不能省） -
.pagination .page-item.active .page-link—— 当前页（注意是.page-item.active包裹.page-link，不是.page-link.active） -
.pagination .page-item.disabled .page-link—— 禁用态（首/末页常处于此状态，容易忽略）
示例（深蓝主题）：
.pagination .page-link {
background-color: #4a6fa5;
border-color: #3a5a8c;
color: white;
}
.pagination .page-link:hover,
.pagination .page-link:focus {
background-color: #3a5a8c;
border-color: #2a4a7c;
}
.pagination .page-item.active .page-link {
background-color: #0d47a1;
border-color: #0a3a82;
color: white;
}
.pagination .page-item.disabled .page-link {
background-color: #e9ecef;
border-color: #dee2e6;
color: #6c757d;
opacity: 0.6;
}
如何避免被其他 CSS 干扰
如果你的样式仍被覆盖，检查是否被更高优先级来源影响，比如：
- 第三方 UI 库（如 AdminLTE）自带分页样式
- 项目中其他
.pagination规则定义在你样式之后（CSS 加载顺序问题） - 内联样式或 JS 动态插入的 style 标签
稳妥做法：给外层加自定义 class，比如 <nav class="my-pagination"><ul class="pagination">...</ul></nav>，然后用 .my-pagination .pagination .page-link 开头写规则——既提升权重，又避免污染全局。
禁用态的交互逻辑别只靠 CSS
.disabled 类只控制样式和 tabindex="-1"，但 <a></a> 标签本身仍可点击。如果用户鼠标右键另存为、或用键盘回车触发，默认行为会跳转（哪怕 href 是 #）。必须配合 JS 阻断：
document.querySelectorAll('.page-item.disabled .page-link').forEach(el => {
el.addEventListener('click', e => e.preventDefault());
});
这点常被忽略，尤其在 SSR 或静态页面中，光靠 CSS 无法真正禁用链接行为。
最易出问题的地方不在颜色值本身，而在状态覆盖不全、禁用态缺乏 JS 配合、以及选择器权重预估错误——建议每次改完，手动 hover / focus / 点击 / tab 切换，挨个验证五种状态是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
