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

Question

我可以为每个药丸分配自定义背景颜色,但我真正想要的是每个自定义颜色的褪色(这只是改变上面的值的问题),并且有活性颜色匹配相应药丸的全彩色.

• 丸一>褪红
• 丸二>褪色蓝光
• 丸三>褪黑色

什么时候

• 丸一活跃>红色
• 丸二活性>蓝光
• 丸三活性>黑色

我的代码

<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);
}

引导覆盖

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

Answer 1

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

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

/* not active */
.nav-pills .pill-1 .nav-link:not(.active) {
    background-color: rgba(255, 0, 0, 0.5);
}

.nav-pills .pill-2 .nav-link:not(.active) {
    background-color: rgba(0, 250, 0, 0.5);
}

.nav-pills .pill-3 .nav-link:not(.active) {
    background-color: rgba(0, 0, 250, 0.5);
    color: white;
}


/* active (faded) */
.nav-pills .pill-1 .nav-link {
    background-color: rgba(255, 0, 0, 0.2);
    color: white;
}

.nav-pills .pill-2 .nav-link {
    background-color: rgba(0, 250, 0, 0.2);
}

.nav-pills .pill-3 .nav-link {
    background-color: rgba(0, 0, 250, 0.2);
    color: white;
}