Layui表格如何修改分页组件的颜色和样式-Layui教程-PHP中文网

Layui分页样式由.layui-laypage相关CSS类控制，需通过精准覆盖其选择器（如.layui-laypage a、.layui-laypage-curr）并加!important实现，不可修改源文件或使用宽泛选择器，且须确保CSS加载顺序在layui.all.js之后。

layui table 分页样式在哪改

分页组件的样式不是通过表格配置项控制的，而是由 layui 自带的 .layui-laypage css 类决定。你改 table.render() 的参数没用，得直接覆盖它的 css 规则。

常见错误是去翻 page 配置里的 theme 或 limit，这些只影响功能逻辑，不影响颜色和边框。

分页 DOM 结构固定：外层是 <div class="layui-laypage">，内部按钮是 <code><a></a> 和 <span></span>
关键类名必须精准匹配：.layui-laypage a、.layui-laypage .layui-laypage-curr、.layui-laypage em
由于 Layui 使用内联样式 + 优先级较高的 CSS，建议用 !important 强制覆盖（别嫌土，有效）

如何安全覆盖 layui-laypage 的颜色

不要修改 layui.css 源文件，否则升级就丢；也不要在 <style></style> 标签里写太宽泛的选择器（比如直接写 a { color: red; }），会污染全局。

推荐在页面末尾加一段针对性 CSS：

.layui-laypage .layui-laypage-a,
.layui-laypage .layui-laypage-next,
.layui-laypage .layui-laypage-prev {
  background-color: #4a9ff5 !important;
  color: #fff !important;
  border: 1px solid #4a9ff5 !important;
}
.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background-color: #4a9ff5 !important;
}
.layui-laypage .layui-laypage-curr {
  background-color: #4a9ff5 !important;
  color: #fff !important;
}

注意 .layui-laypage-curr 是当前页容器，.layui-laypage-em 是它里面那个小蓝底白字的圆角背景
如果用了主题色切换，建议把这类样式抽成 CSS 变量，比如 background-color: var(--primary-color);
移动端下按钮变小，可加媒体查询微调 font-size 和 padding

为什么改了没生效？几个典型坑

不是代码写错，大概率是加载顺序或选择器权重问题。

Layui 的 CSS 文件在 JS 渲染分页后才插入 DOM，所以你的自定义样式必须放在 layui.all.js 加载之后，且最好在 table.render() 调用之后再 append
用了 iframe 或动态加载内容时，分页可能被重复渲染，导致样式被重置 —— 解决办法是在 done 回调里再执行一次样式注入
如果你用的是 Layui 2.8+，它默认启用了 scoped 样式隔离（尤其在模块化引入时），此时需把 CSS 放到或用 :deep(.layui-laypage)（仅 Vue 场景）
检查浏览器开发者工具里，对应元素上是否真的应用了你的规则 —— 经常是拼写错误，比如把 layui-laypage-a 写成 layui-page-a