html - 如何更改 Bootstrap 中每个药丸(选项卡)的选项卡内容颜色？

Question

我已经设置了一个 Bootstrap tab/pills nav 东西。我有 3 个选项卡:“收养”、“捐赠”和加入。我希望内容背景与事件选项卡的颜色相匹配。

<div id="exTab1" class="container"> 

  <ul class="nav nav-pills">
    <li class="active"><a  class="adopt-tab" href="#1a" data-toggle="tab">ADOPT</a></li>
    <li><a class="donate-tab" href="#2a" data-toggle="tab">DONATE</a></li>
    <li><a class="join-tab" href="#3a" data-toggle="tab">JOIN</a></li>
  </ul>

</div>

到目前为止，我已经设法设置它，使每个药丸都有不同的颜色，并且第一个选项卡的内容与药丸的颜色相匹配。但是，其他选项卡的内容当前使用相同的颜色...

#exTab1 .tab-content {
  color : white;
  padding : 5px 15px;
  background-color: #EF476F;
}

我假设我必须将它链接到 ID(#1a、#2a、#3a)，但我还没有找到让每个选项卡具有不同颜色的方法。

这是一个codepen link这有望解释我的意思。

Answer 1

数字不应用作 id="" 属性的第一个字符，因此 #exTab1 .tab-content > #2a CSS 选择器不是在职的。但是，您可以像这样在 CSS 中选择标签 ID...

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

#exTab1 .tab-content > [id='1a']  {
    background-color: #EF476F;
}

#exTab1 .tab-content > [id='2a']  {
    background-color: #FF6663;
}

#exTab1 .tab-content > [id='3a']  {
    background-color: #FFD166;
}

Bootstrap 4 更新

这是一个有效的 example for Bootstrap 4 . .active 类现在应该放在 nav-link 上，CSS 也相应更新。此外，以数字(1a、2a、3a 等...)开头的给定元素 id= 也不是好的做法。考虑将选项卡重命名为 a1、a2、a3 等...

Updated for Bootstrap 4.3.1 + Fill height