自定义Bootstrap按钮点击后变为btn-primary样式，现有方案无效求解决

看起来你遇到的核心问题是Bootstrap默认的按钮状态样式优先级盖过了你的自定义规则，仅靠:active:focus选择器既覆盖不全状态场景，权重也不足以对抗Bootstrap的默认样式。我来帮你调整一下方案：

首先，Bootstrap的.btn系列样式本身有较高的优先级，你的单一类选择器.btn-custom01权重不够，所以会被默认的btn-primary相关状态样式覆盖。另外，按钮点击后可能触发:active、:focus或者两者结合的状态，只写:active:focus覆盖不全所有交互场景。

试试修改你的CSS代码，提升选择器权重并覆盖所有相关状态：

/* 基础自定义按钮样式，提升权重确保覆盖默认样式 */
.btn.btn-custom01 {
  background-color: #3b3b3b;
  border-color: #ff0066;
  color: #ffffff; /* 显式设置默认文字颜色，避免继承异常 */
}

/* 悬停状态保持你的原有需求 */
.btn.btn-custom01:hover {
  background-color: #3b3b3b;
  border-color: #f2f2f2;
}

/* 覆盖点击、聚焦及组合状态，确保所有交互场景都生效 */
.btn.btn-custom01:active,
.btn.btn-custom01:focus,
.btn.btn-custom01:active:focus {
  background-color: #333333;
  border-color: #ff0066;
  color: #ff0066;
  box-shadow: none; /* 可选：去掉Bootstrap默认的聚焦蓝色阴影，让样式更统一 */
}

关键调整说明： #

• 用.btn.btn-custom01组合选择器提升样式权重，确保能覆盖Bootstrap默认的.btn基础样式。
• 同时覆盖:active、:focus和:active:focus三种状态，覆盖不同浏览器、不同交互场景下的按钮状态。
• 显式设置默认文字颜色，避免继承其他样式导致文字颜色异常。
• 可选添加box-shadow: none，去掉Bootstrap默认的聚焦阴影，让自定义样式更完整。

另外还要确保你的自定义CSS文件是在Bootstrap的CSS文件之后引入的，这样后加载的样式会有更高优先级。如果还是有问题，可以打开浏览器开发者工具，查看具体是哪个样式在覆盖你的自定义规则，针对性调整即可。

内容的提问来源于stack exchange，提问作者S. Bos