Bootstrap CSS 变量不会覆盖分页

Question

使用 Bootstrap（当前 v5.3.3），我正在使用自定义构建的 WordPress 主题，并为所使用的颜色设置一整组覆盖。

定制的 WordPress 主题样式表最后加载，位于 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 */

这里的一切都有效，除了最后两行有关分页的内容。由于某种原因，这些规则不会覆盖正常的 Bootstrap 值（与原色和链接颜色不同，当我使用

text-primary

等类时，它们都使用覆盖值）。

任何人都可以解释一下为什么，或者为什么分页的工作方式不同吗？

Answer 1

嗯，看来我完全错过了这个过程的一个重要步骤，那就是为我想要覆盖的类创建 CSS 声明，然后提供覆盖。

因此，在我的主题样式表中，添加以下内容（并从 :root 部分删除最后两行）可以解决问题并覆盖 Bootstrap 分页颜色。

.pagination {
    --bs-pagination-border-radius:0;
    --bs-pagination-border-color:transparent;
    --bs-pagination-active-bg:var(--mk-gold);
    --bs-pagination-active-border-color:var(--mk-gold);
    --bs-pagination-hover-bg:var(--mk-light-gold);
    --bs-pagination-hover-border-color:transparent;
    --bs-pagination-hover-color:var(--bs-white);
}