bootstrap 4改变nav-pill活跃的颜色

Question

我可以为每个药片分配自定义背景颜色，但我真正想要的是每个自定义颜色的褪色（这只是改变上面的值的问题），并且有效颜色匹配相应药丸的全彩色。

• 药丸一＆gt;褪红色
• 药丸二＆gt;褪色的蓝光
• 药丸三＆gt;褪黑色

当

• 一个活性药丸＆gt;红色
• 丸二活性＆gt;蓝光
• 丸三活性＆gt;黑

我的代码

<ul class="nav nav-pills">
  <li class="nav-item pill-1">
    <a class="nav-link active" href="#">pill one</a>
  </li>
  <li class="nav-item pill-2">
    <a class="nav-link" href="#">pill two</a>
  </li>
  <li class="nav-item pill-3">
    <a class="nav-link" href="#">pill three</a>
  </li>
</ul>

CSS

.pill-1 a {
    background-color: rgba(255, 0, 0, 0.5);
}

bootstrap override

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #d9d9d9;
}

Answer 1

对活动/非活动药丸使用适当的CSS特异性。例如：

https://www.codeply.com/go/Oe6EteovP0

{{1}}