如何用CSS制作分页导航组件？

用flex布局控制页码排列最可控，推荐使用display: flex+gap+justify-content: center；禁用项加pointer-events: none；当前页需同时设.active类和aria-current="page"；省略号用<span>包裹并设aria-hidden="true"；动态页码优先用CSS counter()自动编号。

用 flex 布局控制页码排列，别用 float 或 inline-block

flex 是目前最可控、最易维护的分页布局方式。用 display: flex 替代老式 float 能避免清除浮动、行高错位、首尾 margin 多余等问题。

关键点在于：

1. gap 比 margin 更可靠：它只作用于 item 之间，不会在容器边缘多出空白
2. 用 justify-content: center 居中，比 text-align: center + inline-block 更稳定
3. 禁用项（如“上一页”在第一页时）必须加 pointer-events: none，否则即使视觉灰掉，仍可能被点击触发跳转
4. 响应式换行要慎用：flex-wrap: wrap 在小屏下容易导致页码堆叠错位，建议优先用媒体查询隐藏中间页码，保留首/尾/当前页+省略号

当前页高亮必须同时用 .active 和 aria-current="page"

仅加 .active 类是不够的。屏幕阅读器无法识别纯样式类，必须配合语义化属性。

正确写法是：

<li class="page-item active"><a href="#" aria-current="page">3</a></li>

常见错误：

1. 漏掉 aria-current="page" —— 违反 WCAG 2.1，影响无障碍访问
2. 把 aria-current 放在 <li> 上而非 <a> —— 语义归属错误，部分读屏软件不识别
3. 用 aria-selected="true" 替代 —— 这是 tablist 用的，分页属于 navigation，必须用 aria-current

省略号（…）不能当普通页码处理

省略号不是可点击项，但很多人把它写成 <a href="#">…</a>，再用 CSS 隐藏边框和背景——这会导致键盘 Tab 顺序混乱、焦点停在不可操作元素上。

正确做法：

1. 用 <span> 包裹省略号，不带 href
2. 显式设置 pointer-events: none 和 tabindex="-1"
3. 为省略号添加 aria-hidden="true"，防止读屏软件误读
4. JavaScript 控制其显示逻辑：只有当页码跨度 ≥ 3 时才渲染，比如 1 … 5 … 10

自定义数字样式时，counter() 比硬编码更安全

如果页码是动态生成的（比如后端返回总页数），用 HTML 写死 1、2、3 容易漏改或错位。CSS counter() 可自动递增，结构更干净。

示例用法：

.pagination { counter-reset: page; }
.page-item:not(.ellipsis) { counter-increment: page; }
.page-link::before { content: counter(page); }

注意限制：

1. counter-reset 必须设在最外层容器（如 <ul>），不能放在 <nav> 或 <div> 上，否则重置失效
2. counter() 无法格式化为 “第 X 页”，也不能做数学运算（如显示 “共 N 页”），这类信息仍需 JS 注入或服务端输出
3. IE 不支持 counter()，如需兼容 IE11，必须回退到 JS 渲染或静态 HTML

真正麻烦的不是样式本身，而是页码数量变化时的 DOM 同步、键盘导航顺序、焦点管理，还有移动端 touch 区域是否足够——这些没法靠 CSS 单独解决，得和 JS 配合才行。