R Shiny中无法用自定义CSS修改按钮悬停及点击状态颜色

我编写了以下自定义CSS文件，尝试根据按钮是否处于激活状态将其颜色改为深灰/浅灰：

.btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #494949;
    background-image: none;
    border-color: #494949;
}
.btn-primary, .btn-primary{
    color: #fff;
    background-color: #8f8f8f;
    background-image: none;
    border-color: #8f8f8f;
}
.btn-primary.hover, .btn-primary:hover{
    color: #fff;
    background-color: #8f8f8f;
    background-image: none;
    border-color: #8f8f8f;
}
.btn-primary.active, .btn-primary:focus{
    color: #fff;
    background-color: #494949;
    background-image: none;
    border-color: #494949;
}
.btn-primary.focus, .btn-primary:focus{
    color: #fff;
    background-color: #494949;
    background-image: none;
    border-color: #494949;
}

但点击后的按钮仍默认显示深蓝色，请问我是否遗漏了某些状态选项（active/focus/default）？我已尝试通过Chrome开发者工具定位所有可见元素。

问题排查与修复点 #

1. 伪类写法错误：.btn-primary.hover 是类选择器（匹配带hover类的元素），不是鼠标悬停的伪类，应该直接用:hover伪类，删掉错误的.btn-primary.hover选择器。
2. 冗余选择器：.btn-primary, .btn-primary 完全重复无意义，简化为单个.btn-primary即可。
3. 选择器权重不足：Bootstrap默认对按钮激活状态的定义是更具体的选择器（比如.btn-primary:not(:disabled):not(.disabled):active），你的样式权重不够会被覆盖。可以通过两种方式解决：
   • 提高选择器权重，比如在.btn-primary前添加父元素选择器（如.container .btn-primary:active）
   • 或使用!important（仅在权重提升无效时使用，尽量避免）
4. 覆盖复合状态：按钮点击后通常会同时处于active和focus状态，需要单独覆盖这种复合情况。

修正后的CSS示例 #

/* 默认状态 */
.btn-primary {
    color: #fff;
    background-color: #8f8f8f;
    background-image: none;
    border-color: #8f8f8f;
}

/* 悬停状态 */
.btn-primary:hover {
    color: #fff;
    background-color: #8f8f8f;
    background-image: none;
    border-color: #8f8f8f;
}

/* 激活/点击状态（覆盖Bootstrap默认规则） */
.btn-primary.active,
.btn-primary:active,
.btn-primary.active:focus,
.btn-primary:active:focus,
.open > .dropdown-toggle.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: #494949;
    background-image: none;
    border-color: #494949;
}

/* 聚焦状态 */
.btn-primary.focus,
.btn-primary:focus {
    color: #fff;
    background-color: #494949;
    background-image: none;
    border-color: #494949;
}

额外注意事项 #

确保你的自定义CSS文件在Bootstrap CSS文件之后加载，这样才能优先覆盖默认样式。如果还是不生效，打开Chrome开发者工具查看元素的样式面板，检查哪些默认规则在生效，针对性地写出权重更高的选择器。

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