必须为当前页码元素添加.active类，并配合:root变量、@media(prefers-color-scheme:dark)媒体查询及带fallback的var()样式，三者协同确保深色模式下高亮正确生效。
直接给当前页码加 .active 类，再用 CSS 同时定义浅色和深色下的样式规则——但必须确保变量、媒体查询顺序、类名控制三者协同，否则高亮在深色模式下会失效或错位。
给分页项加 .active 类是基础前提
无论用后端渲染还是前端 JS 控制，当前页码的 <li> 或 <a></a> 必须有明确标识。Bootstrap、Tailwind 等主流方案都依赖 .active；自定义实现也建议统一用这个类名，避免和 :hover、:focus 混淆。
- 不要只靠
:nth-child(2)这类静态选择器——它无法响应真实页码变化 - 服务端渲染时，在生成 HTML 时就写入
class="page-item active" - 客户端动态更新（如 SPA）需在路由切换后手动设置，例如：
document.querySelector('[data-page="3"]').classList.add('active') - 记得移除旧的
.active，否则多个高亮并存
:root 变量 + @media (prefers-color-scheme: dark) 必须配对出现
只写 html[data-theme="dark"] .page-item.active { background: #1e1e1e; } 是不够的——如果页面同时支持系统偏好和手动切换，就得靠 CSS 自定义属性 + 媒体查询兜底。
- 所有颜色变量（如
--page-active-bg、--page-active-text）必须先在:root中声明默认值 -
@media (prefers-color-scheme: dark)块必须紧跟在:root声明之后，且不能嵌套在其他媒体查询里 - 示例结构必须是这样：
:root {
--page-active-bg: #007bff;
--page-active-text: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--page-active-bg: #2563eb;
--page-active-text: #fff;
}
}
漏掉其中任一环，深色模式下 var(--page-active-bg) 就会回退到浏览器默认或继承浅色值。
.page-item.active 样式要同时引用变量和 fallback
别直接写死颜色，否则深色模式无法生效；也别只写 var(--page-active-bg)，万一变量未定义会出问题。
- 正确写法：
background-color: var(--page-active-bg, #007bff); color: var(--page-active-text, #fff); - 边框、阴影等涉及颜色的属性同理，都要带 fallback
- 如果用了 Tailwind 的
dark:前缀，确认已配置darkMode: 'class'并在html上添加了class="dark"，而非仅靠data-theme - 检查 DevTools 的 Elements 面板，点开
:root节点，看切换深色后变量值是否真的变了
SPA 场景下容易忽略：路由变更不触发 CSS 重计算
单页应用里，用户点击“第5页”只是改了 URL hash 或 history.state，DOM 元素没重建，.active 类不会自动更新——CSS 再完善也没用。
- 监听
hashchange或popstate事件，手动更新.active - 使用 React Router / Vue Router 时，应在
useEffect或onMounted中同步 DOM 状态 - 若用 Alpine.js，可绑定
x-data和x-bind:class动态控制 - 切记：高亮逻辑必须和路由状态严格一致，否则用户看到的“当前页”和实际 URL 不匹配
最常被绕过的点是变量 fallback 和媒体查询顺序——它们不出错时一切正常，一旦出错又极难定位，因为浏览器不会报错，只默默按默认值渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
