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

它似乎确实按预期工作：

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

Answer 2

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

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

看起来同样的问题出在其他地方，如果您的徽章没有类，则徽章的样式不能相同。无论如何，css类优先级主要取决于它们的具体程度。例如

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

覆盖

.badge-success {
   background-color: green
}

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

background-color: red!important;

为什么我们不能使用CSS在Bootstrap 4中更改徽章类的颜色？

2 个答案: