Layui分页当前页高亮需覆盖.layui-laypage-curr和.layui-laypage-curr .layui-laypage-em两个CSS类，样式须在layui.all.js加载后、table.render()执行完注入，并注意加载时机、选择器权重、scoped穿透、缓存及响应式适配。
直接改 .layui-laypage-curr，别碰 JS 配置
Layui 分页的当前页高亮不靠 table.render() 的 page 选项，它压根没提供 color、theme 这类样式参数。真正起作用的是 CSS 类：.layui-laypage-curr（当前页容器）和它里面的 .layui-laypage-em（那个小蓝底白字的圆角块）。你得覆盖这两个选择器。
-
.layui-laypage-curr控制整个当前页按钮的背景、文字、边框 -
.layui-laypage-curr .layui-laypage-em控制内部高亮圆角块，单独调色时用它 - 必须加
!important——Layui 渲染时写内联style，普通规则压不住 - 样式代码要放在
layui.all.js加载之后，最好在table.render()执行完再注入，否则可能被覆盖
为什么写了样式却没生效？几个高频坑
不是选择器写错，大概率是加载时机或权重问题：
- 用了 iframe 或动态内容加载，分页 DOM 被重复渲染，你写的样式被重置——解决办法是在
done回调里再执行一次$("head").append("<style>...</style>") - 用了 scoped CSS（如 Vue 单文件组件），需用
:deep(.layui-laypage-curr)穿透 - 选择器层级不够，比如只写了
.layui-laypage-curr，但 Layui 实际生成的是.layui-laypage .layui-laypage-curr，漏了父级就失效 - 浏览器缓存旧 CSS，清缓存或硬刷新（Ctrl+F5）再试
移动端适配和主题色解耦建议
纯 PC 端改完就完事，但真上线得考虑更多：
- 移动端按钮会自动缩小，
font-size和padding建议加媒体查询微调，比如@media (max-width: 768px) { .layui-laypage a { padding: 4px 8px; font-size: 12px; } } - 如果项目支持主题切换，别硬编码颜色值，抽成 CSS 变量：
background-color: var(--primary-color);，然后全局控制:root { --primary-color: #4a9ff5; } - 注意可访问性：当前页背景色与文字色对比度至少达 4.5:1，避免用
#ff0000配#ffffff这种刺眼组合
真正麻烦的不是写几行 CSS，而是确保它在分页重绘、iframe 切换、主题切换、响应式缩放这些场景下始终稳定生效——这些细节不显眼，但线上一出问题就是整页分页失色。
