分页类名不通用，各CSS框架如Bootstrap、Tailwind的类名互不兼容；需严格按所用框架文档的HTML结构（如Bootstrap 5要求<nav>包裹、<ul class="pagination">、<li class="page-item">内嵌）编写，动态生成需后端或前端控制逻辑，自定义样式应提高选择器特异性而非滥用!important。
分页类名是否通用？先看框架文档约定
多数 CSS 框架（如 Bootstrap、Tailwind、Bulma）的分页组件不依赖 JavaScript，而是靠一组预定义的 .pagination 及其子类（如 .page-link、.page-item）控制样式。但类名不互通——Bootstrap 的 .page-item 在 Tailwind 里根本不存在，直接套用会完全失效。
实操建议：
- 打开你正在用的框架官网，搜索 “pagination” 页面，确认它推荐的最简 HTML 结构
- 不要复制其他框架的示例代码，哪怕看起来“长得一样”
- 注意是否有必需的父容器类（例如 Bootstrap 5 要求
<nav>包裹，且加aria-label="Page navigation"）
HTML 结构怎么写才不出错？
常见错误是漏掉语义标签或嵌套层级错位，导致点击区域不可用、屏幕阅读器无法识别、或样式断层。以 Bootstrap 5 为例，最小可用结构必须包含：
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="?page=1">1</a></li>
<li class="page-item active"><a class="page-link" href="?page=2">2</a></li>
<li class="page-item"><a class="page-link" href="?page=3">3</a></li>
</ul>
</nav>
关键点：
立即学习“前端免费学习笔记（深入）”；
-
<nav>和<ul>缺一不可；<li>必须是<ul>的直接子元素 - 当前页用
class="page-item active"，不是只加active；链接本身必须是<a>，不能用<span>代替（否则无焦点、不可键盘操作） - 上一页/下一页按钮需用
<li class="page-item"><a class="page-link" aria-label="Previous">«</a></li>，aria-label不可省
如何动态生成页码？后端还是前端？
纯 CSS 分页类不处理逻辑，只负责样式。页码数量、当前页高亮、禁用状态（如第一页时“上一页”变灰），都得由你控制 HTML 输出。
选择依据：
- 服务端渲染（如 Django、Rails、PHP）：在模板里循环
range(1, total_pages + 1)，对current_page加active类，判断边界加disabled—— 稳定、SEO 友好 - 前端 JS 渲染（如 Vue/React）：用组件封装
Pagination，接收currentPage、totalPages等 prop，生成page-item列表；注意避免直接拼 HTML 字符串，要用框架的安全渲染机制 - 静态页面（如 Hugo/Jekyll）：用模板引擎的分页变量（如 Jekyll 的
paginator.total_pages），生成固定 HTML
容易踩的坑：disabled 是加在 <li class="page-item disabled"> 上，不是加在 <a> 上；且需同时移除 href 或设为 javascript:void(0)，否则仍可点击跳转。
自定义样式时，为什么加了 class 还没反应？
因为框架通常用较具体的选择器，比如 Bootstrap 的 .pagination .page-link:hover 权重高于你写的 .my-page a:hover。强行覆盖要提高优先级，或用 !important（不推荐）。
更稳妥的做法：
- 复用框架已有修饰类：如 Bootstrap 支持
.pagination-lg/.pagination-sm控制尺寸，.justify-content-center居中 - 在框架 CSS 后引入自定义样式，并用更具体的选择器，例如：
.pagination.custom-pager .page-link { padding: 4px 12px; } - 检查是否误删了框架必需的 JS（如 Bootstrap 分页虽不依赖 JS，但若你用了
data-bs-toggle等交互属性，就真需要 JS 支持了）
最常被忽略的一点：分页组件默认是行内排列，如果父容器宽度不够，页码会折行或溢出——记得加 flex-nowrap（Bootstrap）或 white-space: nowrap（自定义）来保底。
