Bootstrap 5.3.3分页CSS变量未覆盖问题求助

我正在使用Bootstrap 5.3.3版本搭配自定义WordPress主题，通过:root变量批量覆盖Bootstrap默认颜色。自定义主题样式表在Bootstrap样式表之后加载，主题样式表顶部代码如下：

/* Colours */
:root {
    
    --mk-gold:#ab9460;
    --mk-gold-rgb:171,148,96;
    --mk-dark-gold:#615338;
    --mk-dark-gold-rgb:97,83,56;
    --mk-light-gold:#c4bc9a;
    --mk-light-gold-rgb:196,188,154;

    --bs-primary:var(--mk-gold);
    --bs-primary-rgb:var(--mk-gold-rgb);

    --bs-link-color:var(--mk-gold);
    --bs-link-hover-color:var(--mk-dark-gold);
    --bs-link-color-rgb:var(--mk-gold-rgb);
    --bs-link-hover-color-rgb:var(--mk-dark-gold-rgb);

    --bs-pagination-active-bg:var(--mk-gold);
    --bs-pagination-active-border-color:var(--mk-dark-gold);

}
/* End Colours */

目前除最后两行分页相关变量外，其余覆盖设置均生效（如primary颜色、链接颜色使用text-primary等类时正常显示自定义值），但分页激活状态的背景色和边框色仍为Bootstrap默认的蓝色。

可能的原因 #

• WordPress主题的分页样式优先级更高：很多自定义WP主题会为分页写独立的样式，且直接使用硬编码的颜色值（而非Bootstrap变量），这类样式会覆盖Bootstrap通过变量定义的样式——具体颜色值的优先级高于变量引用。
• 分页HTML结构未遵循Bootstrap标准：如果主题的分页没有使用Bootstrap的标准类结构（.pagination > .page-item.active > .page-link），Bootstrap的分页变量就不会作用到对应元素上。
• 变量被后续样式重新覆盖：如果主题的其他样式文件（或内联样式）在自定义样式表之后加载，且重新定义了--bs-pagination-active-bg或--bs-pagination-active-border-color，会覆盖你设置的值。

解决办法 #

1. 验证分页HTML结构
   确认主题生成的分页代码符合Bootstrap标准结构：

   <nav aria-label="Page navigation example">
     <ul class="pagination">
       <li class="page-item active"><a class="page-link" href="#">1</a></li>
       <li class="page-item"><a class="page-link" href="#">2</a></li>
       <li class="page-item"><a class="page-link" href="#">3</a></li>
     </ul>
   </nav>
   

2. 强制覆盖分页样式
   如果主题的硬编码样式优先级更高，可在自定义样式表中添加更具体的选择器，直接指定样式：

   /* 强制覆盖分页激活状态样式 */
   .pagination .page-item.active .page-link {
       background-color: var(--mk-gold);
       border-color: var(--mk-dark-gold);
   }
   

   若不想使用!important，可进一步提高选择器特异性，比如添加主题的容器类前缀，如.my-theme-container .pagination .page-item.active .page-link。

3. 检查变量定义是否被覆盖
   使用浏览器开发者工具（F12）查看:root节点的变量，确认--bs-pagination-active-bg和--bs-pagination-active-border-color是否已被正确设置为你的自定义值。如果变量未生效，检查样式表的加载顺序，确保自定义样式表在所有Bootstrap相关样式之后加载。

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