当前页按钮动态高亮的关键是准确及时地将active类添加到真实DOM节点上。需用开发者工具确认数字所在标签（a/span/li/em等），优先通过data-page属性定位，用classList操作类名，清除旧状态后再添加，并确保CSS选择器权重足够且样式无冲突。
当前页按钮动态高亮，核心不是“写对CSS”，而是确保 active 类被准确、及时地加在正确的元素上——多数失败案例都卡在这一步，而不是样式本身。
怎么确认当前页元素该加在哪个标签上
别默认往 a 上加 active。先用浏览器开发者工具（F12）点一下当前页数字，看高亮的是 a、span 还是它的父级 li。常见情况有：
- WordPress 模板常用
.wp-pagenavi span.current，此时active应加在span上 - LayUI 的
.layui-laypage > .layui-laypage-curr是独立em标签包裹数字，高亮类在em上 - 很多自定义分页把
active加在li，而a仅负责跳转，样式靠.pagination li.active a控制 - 如果结构是
<div class="pages"><span>3</span></div>，那 JS 就得操作span而非a
JavaScript 动态添加 active 类的可靠写法
用 classList 替代直接改 className，避免覆盖已有类；同时清除旧状态，防止残留：
function setActivePage(pageNum) {
// 先清掉所有 active
document.querySelectorAll('.pagination li, .pagination a, .pagination span').forEach(el => {
el.classList.remove('active', 'current');
});
// 再给目标元素加 active —— 注意：这里要匹配你实际的结构
const target = document.querySelector(`.pagination li:nth-child(${pageNum})`);
if (target) target.classList.add('active');
}
- 不要用
innerHTML匹配文本内容判断当前页（如if (el.textContent === '3')），DOM 可能含空格或换行 - 优先用
data-page属性锚定：<li data-page="3"><a>3</a></li>，然后查document.querySelector('[data-page="' + pageNum + '"]') - 如果分页是 JS 动态生成的（比如调用
renderPagination()后才插入 DOM），必须等节点挂载完成再执行setActivePage()，否则查不到元素
CSS 高亮样式为什么总不生效
最常踩的坑是选择器权重不够，或 active 类没被真正应用到渲染节点上。验证和修复要点：
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，检查当前页元素是否真有
class="active"—— 没有就说明 JS 没跑对，别急着调 CSS - 如果有了但样式无效，看 computed 样式里
background-color或color是否被其他规则覆盖；试试加!important临时验证（上线前删掉） -
.pagination li.active a比.active权重高，也比a.active更稳妥（因有些模板a不带类，但li有） - 用
background-color高亮时，务必同步设color，否则白底上白字就看不见了 - 如果用了
border-radius，a.active的圆角值必须和普通状态完全一致，不能一个写4px、一个写50%
真正难的不是写出高亮效果，而是让 active 类精准落在每次渲染后的真实 DOM 节点上——尤其当分页结构嵌套深、类名不统一、或由第三方库动态接管时，JS 查找逻辑很容易失效。动手前，先用 F12 确认三件事：当前页数字在哪个标签里、它有没有可识别的属性（如 data-page）、以及分页容器是否已存在于 DOM 中。
