Woocommerce/Wordpress：修改page-number.current等分页元素颜色咨询

高优先级自定义CSS代码 #

以下CSS仅作用于Woocommerce页面的分页组件，不会修改全站其他元素样式：

/* 当前选中分页页码样式 */
body.woocommerce .page-numbers.current {
    color: #ffffff !important;
}
/* 当前选中分页hover样式 */
body.woocommerce .page-numbers.current:hover {
    color: #ffffff !important;
}
/* 上一页/下一页按钮hover样式 */
body.woocommerce .prev.page-numbers:hover,
body.woocommerce .next.page-numbers:hover {
    color: #ffffff !important;
}

CSS部署位置（二选一即可） #

• WordPress后台 → 外观 → 自定义 → 额外CSS，将上述代码粘贴到输入框最底部，点击「发布」保存即可
• Elementor全局设置 → 自定义代码 → 新建代码片段，粘贴代码后选择插入位置为<head>，生效范围设置为全站，保存后启用即可

不生效排查方案 #

• 保存后先按Ctrl+F5强制刷新浏览器本地缓存，或清空站点缓存插件的所有缓存后再访问页面测试
• 若仍未生效，可右键点击分页按钮选择「检查」，确认分页组件的父容器唯一类名，将CSS选择器前补充该类名，进一步提升样式优先级即可覆盖原有样式

内容的提问来源于stack exchange，提问作者Andreas Hejslet