如何修改未选中单选按钮的btn-primary标签背景色？

你的问题出在CSS选择器用错了——Bootstrap的btn-check是隐藏的单选框，选中状态是input元素的属性，不是label（.btn-primary）的，你直接给.btn-primary加:checked伪类完全不生效，反而因为你把所有.btn-primary都强制设成了紫色背景，导致两个按钮都变紫。

下面是修正后的完整CSS，不用!important也能生效（因为你的样式文件在Bootstrap之后引入，选择器优先级足够）：

/* 未选中状态的按钮样式 */
.btn-group .btn.btn-primary {
    background-color: #FFFFFF;
    border-color: #9381FF;
    color: #9381FF; /* 白色背景下用紫色文字更清晰，可按需调整 */
    border-radius: 2em;
}

/* 选中状态的按钮样式 */
.btn-check:checked + .btn.btn-primary {
    background-color: #9381FF;
    border-color: #9381FF;
    color: #e8f1f9;
    border-radius: 2em;
}

/* 未选中按钮的hover效果 */
.btn-group .btn.btn-primary:hover {
    background-color: #f0f0ff;
    border-color: #6f5cd9;
    color: #6f5cd9;
    border-radius: 2em;
}

/* 选中按钮的hover效果 */
.btn-check:checked + .btn.btn-primary:hover {
    background-color: #6f5cd9;
    border-color: #6f5cd9;
    color: #e8f1f9;
    border-radius: 2em;
}

/* 焦点/激活状态的样式（可选，保持Bootstrap交互逻辑） */
.btn-check:focus + .btn.btn-primary,
.btn-check:active + .btn.btn-primary {
    background-color: #9381FF;
    border-color: #9381FF;
    color: #e8f1f9;
    box-shadow: 0 0 0 0.25rem rgba(147, 129, 255, 0.25);
}

关键说明： #

1. 用btn-check:checked + .btn.btn-primary这个兄弟选择器，关联选中的input和它后面的label按钮，这是Bootstrap按钮组单选框的正确样式控制方式。
2. 先给所有未选中的.btn-primary设置白色背景，再覆盖选中状态的样式，这样默认未选中的按钮就是白色，选中的变成紫色。
3. 去掉了所有!important，因为现在的选择器优先级比Bootstrap默认的.btn-primary更高，能正常覆盖样式。

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