引导按钮处于活动状态且目标样式不起作用答案

【问题标题】：Bootstrap button active and target styling not working引导按钮处于活动状态且目标样式不起作用
【发布时间】：2015-12-06 08:51:47
【问题描述】：

我正在尝试自定义我的 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 不起作用？

【问题讨论】：

不是您问题的答案，但您真的不应该将变量命名为 $white、$orange 等。将它们命名为 $primary、$secondary 等。
这真的是最佳实践吗？嗯..命名颜色对我来说似乎更直观。我会试一试你的建议，看看它在未来的项目中如何发挥作用。谢谢:)
尝试添加!important。
:active 工作正常。松开鼠标按钮后，它就像:hover 一样工作。 :active 仅用于鼠标按下而不是单击。
有很多文章解释了为什么不应该这样做，最明显的一篇是如果你将它从 $white 中的颜色更改为黑色，你还必须更改所有变量的名称你用过的地方。因此，甚至一开始就使用变量完全没用。

标签： css button twitter-bootstrap-3 sass

【解决方案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;
}

【讨论】：

这对我来说很合适。这完全是关于选择器的特异性。有趣的是，Chrome 的 DevTools 显示我的 CSS 规则优先，尽管它不是。一旦我使我的选择器更具体，这解决了问题。

【解决方案2】：

当您定位 bootstrap 元素时，请始终牢记遵循并覆盖所有可能的组合。

在您的情况下，您的目标是 bootstrap buttons，它们显然具有各种组合。覆盖它们并不意味着您必须使用!important，它只是您必须以正确的方式使用正确的selector。

正如您定义的.btn:active，但button 可以是:active 以及:focus 在同一点，即.btn:active:focus。因此，如果您想覆盖其:active 状态，那么您必须寻找所有方面：

button.btn:active, 
button.btn:focus, 
button.btn:target, 
button.btn:active:focus { ... /*write your CSS here */ }

我在这里创建了一个JSFiddle，也请看看。

希望它能帮助您解决您的疑问，并消除您对!important的疑虑。

【讨论】：