为什么我们不能使用 css 在引导程序 4 中更改徽章类的颜色

Question

Bootstrap v4.3.1 中的徽章类是

.badge {
   display: inline-block;
   padding: 0.25em 0.4em;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 
   border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

要更改其颜色，我们可以添加以下类

.badge-success {
   color: #fff;
   background-color: #28a745;
}

逻辑会说，如果我想制作自己的颜色，我可以在我的 css 文件中创建一个新类，如下所示

.badge-mine {
   color: #212529;
   background-color: #808080;
}

当这工作时，它应该可以工作...

<span class="badge badge-success">test</span>

那么这也应该有效，但它不起作用，即使它们看起来相同。

<span class="badge badge-mine">test</span>

我已经检查了很多答案，但似乎没有人回答为什么我们不能这样做。虽然，我不是CSS专家，但我知道最后一个命令会覆盖前一个命令，即这应该覆盖

color: #212529;
background-color: #808080;

这

color: #fff;
background-color: #28a745;

但由于某种原因，它在这里没有发生。

一些 bootstrap 4 专家能否阐明为什么徽章地雷不起作用，即使它看起来几乎与徽章成功一模一样？

谢谢

Answer 1

它应该按照您的预期工作。但是如果你的两个徽章

<span class="badge badge-success">test</span>
<span class="badge badge-mine">test</span>

看起来一样，问题出在其他地方，如果徽章没有作为类，您的徽章就不能具有相同风格的 .badge-success。无论如何，css类优先级主要取决于它们的具体程度。例如

.badge.badge-success {
   background-color: red;
} 

重写

.badge-success {
   background-color: green
}

您可以覆盖此行为，将 ！important 添加到 css 参数中，例如

background-color: red!important;

Answer 2

好吧，它似乎确实按预期工作：

.badge-mine {
   color: #212529;
   background-color: #808080;
}
.badge-mine-2 {
   color: #ff3300;
   background-color: #0022ff;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<span class="badge badge-mine">test</span>
<span class="badge badge-mine-2">test</span>