如何替换引导程序选择 CSS？

Question

我正在尝试更改乘数 x 1.2 的颜色，尽管我已经用规则覆盖了 CSS！重要的是，未应用更改。这就是我想要做的。

我正在尝试更改图像中带有下划线的文本的颜色，但我不能。我不明白我错在哪里。

小提琴：https://jsfiddle.net/snake93/mfhvs6xp/120/

代码

.opth {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 600 !important;
  color: #2f354c  !important;
  background: #fff !important;
}

.opt {
  background: #fff !important;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500 !important;
  color: #5f6a91 !important;
}

.filter-option {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500 !important;
  color: #5f6a91 !important;
}

.opt:hover {
  background: #F6F7F7 !important;
  color: #2f354c !important;
}

.btn {
  border-radius: 0px !important
}

.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }

.dropdown.bootstrap-select.a_level {
    border: 1px solid #DCDCDE;
}

/*--CSS Moltiplicatore x1.2--*/
.txt-muted {
    color: #0d75d2!important;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">

<div class="container_level">
  <select class="a_level" id="a_level" form="bmrcalc" name="activ_level" data-show-subtext="true" data-width="100%">
    <option class="opth" value="0">Stile di vita / Attività fisica</option>
    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Moltiplicatore x 1.2">Sedentario, Smart Working, studio, pochi passi al giorno</option>
    <option class="opt" id="attivos" name="radiosa" value="1.375">Leggero, Attività fisica moderata, Corsa, fitness 1-3 Day x Week (1.375) </option>
    <option class="opt" id="allenatos" name="radiosa" value="1.55">Moderato, Operaio edile, Allenamenti intensi 4-5 Day x Week (1.55)</option>
    <option class="opt" id="Mattivos" name="radiosa" value="1.75">Attivo, Lavori pesanti, Bodybuilding, Powerlifting 6-7 Day x Week  (1.75)</option>
    <option class="opt" id="Eattivos" name="radiosa" value="1.9">Estremamente attivo, Atleta, programma di allenamento intenso 6-7 Day x Week (1.9)</option>
  </select>
</div>

<script>$('.a_level').selectpicker();</script>

Answer 1

我只是检查了你的代码，我用这个 css 语句解决了问题：

/*--CSS Moltiplicatore x1.2--*/
.text .text-muted {
    color: green !important;
}

我希望我有所帮助；）

Answer 2

您可以使用小的 css 选择器来更改数据子文本的 css，以便您的 html 看起来像这样

.opt small{
 color: red !important;
}

Answer 3

我将选择器更改为small.text-muted，这使您的选择器比框架提供的 css 更具体。您还拥有txt-muted 的选择器。

我使用small.text-muted 是因为框架（引导程序）将该文本放置在<small> 标记内，使用浏览器中的开发工具可以看到该标记。

.opth {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 600 !important;
  color: #2f354c  !important;
  background: #fff !important;
}

.opt {
  background: #fff !important;
  font-family: Roboto;
  font-size: 13px;
  font-weight: 500 !important;
  color: #5f6a91 !important;
}

.filter-option {
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500 !important;
  color: #5f6a91 !important;
}

.opt:hover {
  background: #F6F7F7 !important;
  color: #2f354c !important;
}

.btn {
  border-radius: 0px !important
}

.dropdown .bootstrap-select .dropdown-toggle:focus, .dropdown  .bootstrap-select>select.mobile-device:focus+.dropdown-toggle, .dropdown .btn:not(:disabled):not(.disabled) {
    outline: none !important;
 }

.dropdown.bootstrap-select.a_level {
    border: 1px solid #DCDCDE;
}

/*--CSS Moltiplicatore x1.2--*/
small.text-muted {
    color: #0d75d2!important;
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
 
<!--BootStrap Select-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>

<!--BootStrap-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.0/css/bootstrap.min.css">

<div class="container_level">
  <select class="a_level" id="a_level" form="bmrcalc" name="activ_level" data-show-subtext="true" data-width="100%">
    <option class="opth" value="0">Stile di vita / Attività fisica</option>
    <option class="opt" id="leggeros" name="radiosa" value="1.2" data-subtext="Moltiplicatore x 1.2">Sedentario, Smart Working, studio, pochi passi al giorno</option>
    <option class="opt" id="attivos" name="radiosa" value="1.375">Leggero, Attività fisica moderata, Corsa, fitness 1-3 Day x Week (1.375) </option>
    <option class="opt" id="allenatos" name="radiosa" value="1.55">Moderato, Operaio edile, Allenamenti intensi 4-5 Day x Week (1.55)</option>
    <option class="opt" id="Mattivos" name="radiosa" value="1.75">Attivo, Lavori pesanti, Bodybuilding, Powerlifting 6-7 Day x Week  (1.75)</option>
    <option class="opt" id="Eattivos" name="radiosa" value="1.9">Estremamente attivo, Atleta, programma di allenamento intenso 6-7 Day x Week (1.9)</option>
  </select>
</div>

<script>$('.a_level').selectpicker();</script>