Bootstrap 按钮处于活动状态且目标样式不起作用

Question

我正在尝试自定义我的 boostrap 按钮颜色，包括悬停状态以及用户忙于单击按钮（按钮按下）和用户实际单击按钮之后的颜色。我的 sass 看起来像这样：

// Button styling
button.btn {
  color: $white;
  background-color: $lightOrange;
  border-color: $darkOrange;
}
button.btn:hover {
  color: $white;
  background-color: $mediumOrange;
  border-color: $darkOrange;
}
button.btn:active, button.btn:target {
  color: $white;
  background-color: $darkOrange;
  border-color: $darkOrange;
}

现在默认和悬停状态很好用，但是当用户在按钮上单击鼠标时，它默认回到引导程序默认的灰色。同样在单击按钮后，它仍然是灰色，而不是$darkOrange我指定的灰色。所以简单地说，为什么不:active和:target的工作？

Answer 1

您应该在这里阅读：https ://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

基本上，您需要确保为您的样式提供比 Bootstrap 样式更高的特异性，而不使用!important.

您面临的问题是您使用而button.btn不是仅仅使用.btn. 由于button是一个全局选择器，并且它的特异性比类低，因此 Bootstrap 的样式仍然会优先于相同元素的自定义样式。即使您的文件包含在 Bootstrap 之后。

要解决此问题，只需将您的代码更改为：

.btn {
  color: $white;
  background-color: $lightOrange;
  border-color: $darkOrange;
}
.btn:hover {
  color: $white;
  background-color: $mediumOrange;
  border-color: $darkOrange;
}
.btn:active, 
.btn:target {
  color: $white;
  background-color: $darkOrange;
  border-color: $darkOrange;
}