Почему мы не можем изменить цвет класса значка в начальной загрузке 4 с помощью CSS?

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;

this

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

, но по какой-то причине это не происходит здесь,

Может ли какой-нибудь эксперт по начальной загрузке пролить свет на то, почему мой знак не работает, даже если он выглядит почти так же, как знак успеха?

Спасибо

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
}

Вы можете переопределить это поведение, добавив! Важные для параметров 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>