css - 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;
}

现在默认和悬停状态效果很好，但是当用户在按钮上单击鼠标时，它默认返回到 Bootstrap 默认的灰色。同样在单击按钮后，它仍然是灰色，而不是我指定的 $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;
}