用flex布局控制页码排列最可控，推荐使用display: flex+gap+justify-content: center；禁用项加pointer-events: none；当前页需同时设.active类和aria-current="page"；省略号用包裹并设aria-hidden="true"；动态页码优先用css counter()自动编号。
用 flex 布局控制页码排列，别用 float 或 inline-block
flex 是目前最可控、最易维护的分页布局方式。用 display: flex 替代老式 float 能避免清除浮动、行高错位、首尾 margin 多余等问题。
关键点在于：
-
gap比margin更可靠：它只作用于 item 之间，不会在容器边缘多出空白 - 用
justify-content: center居中，比text-align: center+inline-block更稳定 - 禁用项（如“上一页”在第一页时）必须加
pointer-events: none，否则即使视觉灰掉，仍可能被点击触发跳转 - 响应式换行要慎用：
flex-wrap: wrap在小屏下容易导致页码堆叠错位，建议优先用媒体查询隐藏中间页码，保留首/尾/当前页+省略号
当前页高亮必须同时用 .active 和 aria-current="page"
仅加 .active 类是不够的。屏幕阅读器无法识别纯样式类，必须配合语义化属性。
正确写法是：
常见错误：
- 漏掉
aria-current="page"—— 违反 WCAG 2.1，影响无障碍访问 - 把
aria-current放在<li>上而非@#@#@#@#@#@#@#@#@#@0，再用 CSS 隐藏边框和背景——这会导致键盘 Tab 顺序混乱、焦点停在不可操作元素上。正确做法：
- 用
<span></span>包裹省略号，不带href - 显式设置
pointer-events: none和tabindex="-1" - 为省略号添加
aria-hidden="true"，防止读屏软件误读 - JavaScript 控制其显示逻辑：只有当页码跨度 ≥ 3 时才渲染，比如 1 … 5 … 10
自定义数字样式时，counter() 比硬编码更安全
如果页码是动态生成的（比如后端返回总页数），用 HTML 写死
1、2、3容易漏改或错位。CSScounter()可自动递增，结构更干净。示例用法：
.pagination { counter-reset: page; }<br>.page-item:not(.ellipsis) { counter-increment: page; }<br>.page-link::before { content: counter(page); }注意限制：
-
counter-reset必须设在最外层容器（如<ul></ul>），不能放在<nav></nav>或<div> 上，否则重置失效 <li> <code>counter()无法格式化为 “第 X 页”，也不能做数学运算（如显示 “共 N 页”），这类信息仍需 JS 注入或服务端输出 - IE 不支持
counter()，如需兼容 IE11，必须回退到 JS 渲染或静态 HTML
真正麻烦的不是样式本身，而是页码数量变化时的 DOM 同步、键盘导航顺序、焦点管理，还有移动端 touch 区域是否足够——这些没法靠 CSS 单独解决，得和 JS 配合才行。
- 用
