应直接修改 .layui-laypage a 和 .layui-laypage-curr（及其子元素 .layui-laypage-em）的 background-color 并加 !important，因 layui 无 js 样式配置项，内联样式优先级高，仅改外层容器无效。
直接改 .layui-laypage a 和 .layui-laypage-curr 的 background-color
Layui 分页没有 JS 配置项控制背景色，所有视觉样式都靠 CSS 覆盖。关键不是找配置，而是命中正确的选择器并压过内联样式。
常见错误是只改 .layui-laypage 容器——它本身没背景色，真正显示按钮背景的是子元素：
-
.layui-laypage a：所有普通页码、上一页、下一页按钮 -
.layui-laypage .layui-laypage-prev和.layui-laypage .layui-laypage-next：可单独控制前后按钮 -
.layui-laypage .layui-laypage-curr：当前页容器（外层） -
.layui-laypage .layui-laypage-curr .layui-laypage-em：当前页实际带背景的子元素（必须一起改，否则无效）
必须加 !important，否则 Layui 渲染时写的内联 style="background-color: #009688;" 会覆盖你的规则。
为什么只改 .layui-laypage-curr 没反应
因为 Layui 2.8+ 的当前页 DOM 结构是嵌套的：<span class="layui-laypage-curr"><em>3</em></span>。默认背景色写在 <em></em> 上，.layui-laypage-curr 只负责 padding 和边框。
所以这两条必须同时存在：
.layui-laypage .layui-laypage-curr {
background-color: transparent !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
background-color: #1E9FFF !important;
color: #fff !important;
}
漏掉 .layui-laypage-em，你看到的还是默认蓝底白字。
移动端或深色背景下的颜色适配
纯白背景色 rgba(255,255,255,0.1) 在深色页面上几乎看不见；反过来，深色背景在浅底上又太突兀。别用固定色值硬编码：
- 用 CSS 变量统一管理主色：
background-color: var(--page-bg, #4a9ff5) !important; - 配合媒体查询微调：
@media (prefers-color-scheme: dark) { .layui-laypage a { background-color: #333 !important; } } - 避免用
opacity整体降透明度——它会让文字、边框、hover 态全变淡，影响可读性和点击反馈
样式不生效？先检查这三件事
90% 的“改了没用”问题出在加载时机或作用域：
- CSS 文件必须放在
layui.all.js或layui.css之后，否则被覆盖 - 如果分页在 iframe 或动态加载区域里，
table.render()的done回调里要手动再注入一次样式 - 用了 Vue / React 等框架？scoped 样式需穿透：
:deep(.layui-laypage a)或全局 style 块
最稳的办法：打开 DevTools，右键分页按钮 → “Inspect”，看它最终命中哪条 CSS 规则，照着那条 selector + !important 复写。不猜，不试错，直接抄 DOM 里真实生效的路径。
