Bootstrap 5按钮点击颜色异常：自定义.btn-primary:active样式不生效

你的问题出在两个核心点：

• Bootstrap默认对按钮的active状态使用了更具体的选择器，优先级比你写的.btn-primary:active更高，导致自定义样式被覆盖
• 点击按钮时，按钮会同时触发:focus状态，你没有覆盖这个状态的样式，因此会显示默认蓝色

下面是几种可行的解决方法：

方法一：覆盖高优先级选择器（推荐） #

直接针对Bootstrap使用的选择器编写样式，确保优先级足够：

.btn-primary { 
  background-color: #ffa500; 
  border: 1px solid #e39400; 
}
.btn-primary:hover { 
  background-color: #e39400; 
  border: 1px solid #e39400; 
}
/* 覆盖:active、.active以及:focus状态 */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:focus {
  background-color: #e39400;
  border-color: #e39400;
}

方法二：使用!important快速生效（不推荐长期使用） #

如果只是临时测试或不想写复杂选择器，可以用!important强制覆盖样式：

.btn-primary { 
  background-color: #ffa500; 
  border: 1px solid #e39400; 
}
.btn-primary:hover { 
  background-color: #e39400; 
  border: 1px solid #e39400; 
}
.btn-primary:active,
.btn-primary:focus {
  background-color: #e39400 !important;
  border: 1px solid #e39400 !important;
}

方法三：用Bootstrap变量自定义（最规范） #

如果你用Sass编译Bootstrap，可以在引入Bootstrap前定义变量，从根源修改样式，彻底避免优先级冲突：

// 先定义自定义变量
$primary: #ffa500;
$btn-primary-bg: $primary;
$btn-primary-border: #e39400;
$btn-primary-hover-bg: #e39400;
$btn-primary-hover-border: #e39400;
$btn-primary-active-bg: #e39400;
$btn-primary-active-border: #e39400;

// 再引入Bootstrap
@import "bootstrap";

你的原HTML代码无需修改：

<button type="button" class="btn btn-primary">My Button</button>

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