纯 html + css 实现带「下一页」的分页器，必须用 包裹语义化结构，「下一页」应为 下一页 →，而非按钮；当前页用 aria-current="page" 标记，css 重置列表样式、设置足够触摸目标（≥36px）、禁用浮动改用 flex 布局，并确保焦点可见与色觉友好。
怎么用纯 HTML + CSS 实现带「下一页」的分页器？
纯 HTML 本身不支持分页逻辑，next 按钮只是个 @#@#@#@#@#@#@#@#@#@0 —— 点击会滚顶，还破坏浏览器前进/后退栈
CSS 怎么让分页器不丑又可用？
默认 <ul></ul> 的列表符号和外边距会干扰布局，必须重置。重点不是“好看”，而是「焦点可见」「足够点击区域」「移动端友好」。
- 给
<a></a>和<li>设display: inline-block或用 Flex 布局，别依赖浮动 - 每个项最小宽度设
min-width: 32px，高度至少36px，满足 WCAG 触摸目标要求 - 当前页用
background+font-weight: bold，别只靠颜色区分（色弱用户看不见） - 「下一页」文字右侧加
→箭头（content: " →"），比纯文字更明确方向性
后端没给总页数时，怎么安全显示「下一页」？
很多 API 只返回 has_next: true 或下一页的 next_url，而不是总页数。这时候「下一页」按钮的存在本身，就是分页是否继续的唯一依据。
- 渲染时检查响应里的
next_url字段，有值才渲染「下一页」链接，没值就彻底不输出那个<li> - 别用「第 3 页，共 N 页」这种结构 —— N 未知时强行写「...」或「更多」反而更诚实
- 如果用无限滚动替代传统分页，就别叫它“分页器”，也别放「下一页」按钮 —— 这是两种交互范式，混用会 confuse 用户
真正麻烦的从来不是怎么写按钮，而是当用户点完「下一页」发现数据为空、接口报错、或者 URL 参数错乱时，你有没有预留 fallback 路径。结构可以抄，但错误边界处理得自己填。
<nav aria-label="pagination"><ul>
<li><a href="?page=1">1</a></li>
<li><a href="?page=2">2</a></li>
<li aria-current="page">3</li>
<li><a href="?page=4">下一页</a></li>
</ul></nav>前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
