直接改 .layui-laypage a 的 font-size 无效,因父级 .layui-laypage 设有 font-size: 0;须对 a、em 及当前页码元素显式设 font-size 并加 !important 覆盖内联样式。

直接改 .layui-laypage a 的 font-size 无效?先清根字体干扰
layui 分页容器 .layui-laypage 默认设了 font-size: 0,这是为了消除 inline-block 按钮间的空白符间隙。但副作用是:所有子元素(包括页码按钮、文字节点)若没显式重置字号,就会继承 0,导致文字不可见或布局塌陷。
所以不能只写:.layui-laypage a { font-size: 14px; }
它会被父级 font-size: 0 抵消,实际不生效。
必须同步处理两层:
- 给
.layui-laypage本身保留font-size: 0(别动它,否则页码挤成一团) - 给所有需要显示文字的子元素显式设字号,例如:
.layui-laypage a, .layui-laypage em, .layui-laypage .layui-laypage-curr .layui-laypage-em { font-size: 14px !important; }
font-size 要加 !important 吗?要看是否被内联样式覆盖
layui 渲染时会给按钮(如 <a></a>)写内联 style,例如:<a style="font-size:12px;">1</a>
这种内联样式优先级高于普通 CSS 规则,不加 !important 就会被忽略。实测在 Chrome DevTools 中能看到你的规则被划掉。
但注意:只对真正需要覆盖的属性加 !important,比如 font-size、color、background-color;不要整条规则都加,避免后续维护困难。
常见错误写法:.layui-laypage a { font-size: 16px; color: #333; } /* 不加 !important,大概率失效 */
“共 x 条”文字字号怎么单独调?它不是 a 标签
分页栏里的“共 123 条”是纯文本节点,包裹在 em 标签里,类名是 .layui-laypage em,不是链接,也不走 .layui-laypage a 的样式。
所以必须单独写规则:
.layui-laypage em { font-size: 14px !important; color: #666 !important; }- 如果用了
layout: ['count', ...],这个em才会渲染出来;漏掉'count',它就不存在,样式自然无效 - 别试图用
.layui-laypage span或.layui-laypage div去选——它真就是em,没 class,没 id
表格分页和独立 laypage 的字体大小要分开处理
table.render() 的分页栏和 laypage.render() 是两个不同实例,DOM 结构相同但上下文隔离。如果你改了 laypage.render() 的样式,table 的分页不会自动同步。
原因在于:table 模块内部也调用了 laypage,但它的容器是动态生成的,且可能在你自定义 CSS 加载之后才插入 DOM。
稳妥做法:
- 把字体样式规则放在











