Css 启动按钮处于活动状态，目标样式设置不起作用

我正在尝试自定义boostrap按钮的颜色，包括悬停状态、用户忙于单击按钮（按钮向下）以及用户实际单击按钮后的颜色。我的言辞如下：

// 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

不起作用？

您应该在这里阅读：

基本上，您需要确保您的样式比Bootstrap的样式具有更高的特殊性，而不使用

！重要信息

您面临的问题是您使用的是

按钮.btn

，而不仅仅是

.btn

。由于

按钮

是一个全局选择器，并且它比类具有更低的特异性，因此引导程序的样式仍将控制相同元素的自定义样式。即使您的文件在引导后包括在内

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

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

当您针对引导元素时，请始终记住遵循并覆盖所有可能的组合

在您的例子中，您的目标是引导

按钮

s，它们显然有各种组合。覆盖它们并不意味着您必须使用

！重要信息

您只需以正确的方式使用正确的

选择器

正如您定义的那样，

.btn:active

，但是

按钮可以是
：active
，也可以是
：focus
在同一点，即
。btn:active:focus
。因此，如果要覆盖其
：active
状态，则必须查找以下所有方面：

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

这里我已经创建了一个也请看一看

希望它能帮助您解决您的疑问，并消除您对
的疑虑！重要信息
不是对您的问题的回答，但您确实不应该将变量命名为$white、$orange等。。将它们命名为$primary、$secondary等。这真的是最佳实践吗？隐马尔可夫模型。。对我来说，命名颜色似乎更直观一些。我会尝试一下你的建议，看看在未来的项目中效果如何。谢谢：）尝试添加
！重要信息
：active工作正常。释放鼠标按钮后，其工作方式为：悬停：active仅用于鼠标按下而不是单击。有大量文章解释了为什么不应该使用active，最明显的一条是，如果您将$white中的颜色更改为黑色，那么您还必须在所有使用它的地方更改变量的名称。因此，一开始甚至使用变量都是毫无用处的。这对我来说非常合适。这都是关于选择器的特异性。有趣的是，Chrome的DevTools显示我的CSS规则优先，尽管它不是。一旦我使选择器更具体，这就解决了问题。