HTML无内置分页标签，分页器实为开发者手写结构，须先用F12定位真实容器类名（如pagination、pager等）或父级nav/div，再以精准CSS选择器覆盖样式，推荐flex布局并确保语义化与无障碍支持。
HTML 本身没有 pagination 标签，所谓“分页器样式”，实际是开发者用 <nav> + <ul> 或 <div> 手写结构后，靠 CSS 控制外观。改样式前必须先定位到真实 DOM 结构，否则所有 CSS 都是白忙。
怎么找到你模板里真正的分页容器选择器
打开浏览器开发者工具（F12），用「选择元素」图标点一下分页数字，看高亮外层标签的 class 或 id —— 常见的有：pagination、pager、page-nav、wp-pagenavi（WordPress）、layui-laypage（LayUI）。没 class？就往上找最近的 <nav> 或带 id 的 <div>。
- 别直接写
.pagination li a就开干，很多模板根本没这个 class，写了也无效 - 如果结构是
<div class="pages"><span>1</span><a>2</a></div>，那你的选择器就得是.pages span, .pages a - 动态插入的分页（比如 JS 加载后才出现），得等节点渲染完再查，不然 F12 看不到
当前页高亮为什么总不生效
常见原因是选择器权重不够，或状态标识没对上。模板里当前页可能是：class="active"、class="current"、aria-current="page"，甚至只是 <span>2</span> 而链接是 <a>3</a>。
- 优先用组合选择器，比如
.pagination li.active a, .pagination li.current span，只写.active容易被其他组件样式覆盖 - 如果当前页是
<span>不是<a>，那a:hover和a.active都不会生效 - 用
background-color改背景时，记得同时设color，否则文字可能被盖住或对比度不足
页码排列错位、换行、点击区域小
老式写法用 float: left 或 display: inline-block，在窄屏或页码多时极易错乱。Flex 是目前最稳的解法。
立即学习“前端免费学习笔记（深入）”；
- 给外层
<ul>加display: flex，而不是给每个<li>单独设浮动 .pagination ul { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; justify-content: center; flex-wrap: wrap; }-
.pagination ul li { margin: 0 4px; }—— 间距控制在li上，比在a上更可靠 - 把
padding和border-radius写在a或span上，但确保display: block或inline-block，否则点击热区只有文字大小
无障碍和语义化容易被忽略的点
纯视觉美化做完，如果没加语义标记，对键盘用户、读屏软件就是不可用的分页器。
- 整个分页必须包在
<nav aria-label="Pagination">里，不能只用<div> - 当前页必须有
aria-current="page"，仅靠class="active"不够 - “上一页”/“下一页”如果是
<button>，禁用时要加disabled属性并移除onclick；如果是<a>，禁用时要去掉href，加aria-disabled="true" - 省略号
…必须是真实文本节点，不能用::before { content: "..." }，否则读屏软件读不出来
真正卡住人的不是写不出样式，而是改了半天发现压根没选中目标元素，或者当前页状态判断逻辑和模板不匹配。每次动手前，花 30 秒用 F12 确认结构和 class，比试错一小时更省时间。
