如何替换自举选择的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

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

我使用small.text-muted是因为框架(bootstrap)将该文本放在<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>

​

Answer 2

我只需要检查你的代码，然后用下面的css语句解决这个问题：

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

我希望我能帮上忙;)

Answer 3

您可以使用小的css选择器来更改data-subtext的css，这样您的html应该看起来像这样。

.opt small{
 color: red !important;
}