为每个 Bootstrap 活动选项卡 (CSS) 更改为不同的颜色答案

【问题标题】：Change to a Different Colour For Each Bootstrap Active Tab (CSS)为每个 Bootstrap 活动选项卡 (CSS) 更改为不同的颜色
【发布时间】：2015-07-26 15:42:30
【问题描述】：

我可以作为一个组成功更改活动选项卡和非活动选项卡的颜色，但是否可以为每个单独的选项卡这样做？

我正在尝试为活动选项卡和非活动选项卡实现不同的背景颜色和白色文本，以具有白色背景但不同的文本颜色。

这是当前的工作代码：

 .nav-tabs > li > a {
    background-color: #7f7fff !important;
}

 .nav-tabs > li > a:hover{
  background-color: #cc0033 !important;
    color:#fff !important;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background-color: #cc0033 !important;
    color:#fff !important;
}

html

                      <li class="active"><a data-toggle="tab" href="#start">start </a></li>
                      <li><a data-toggle="tab" href="#menu1">menu1</a></li>
                      <li><a data-toggle="tab" href="#menu2">menu2</a></li>

编辑我现在已经按照下面查理的建议在“a”标签中添加了一个类，但仍然无法将颜色更改为特定选项卡

.menu1TabCs > li.active > a, .menu1TabCs .nav-tabs > li.active > a:hover, .menu1TabCs .nav-tabs > li.active > a:focus {
  background-color: orange !important;
    color:#fff !important;
}

【问题讨论】：

使用nth-child 可能类似于.active:nth-child(1)（选择第一个）等等。
此外，您不仅可以在一个元素上使用一个类，而且您在 <a> 上没有任何类，因此添加它们非常简单
@charlietfl 啊哈我明白了，我现在正在尝试这个，你会使用相同的 css 吗？我无法使用相同的代码但使用之前的类名来处理类
那么您的规则不够具体或选择器错误。建议阅读有关 css 选择器特异性如何工作的信息。您还可以使用浏览器开发工具 dom 检查器查看哪些排除在页面中的任何元素上对其他元素进行排名
似乎您将类放在错误的元素上或向后创建选择器...您不希望 <a> 更改吗？不是整个小组？

标签： jquery html css twitter-bootstrap

【解决方案1】：

您应该使用nth-child() 来定位适当的<li> ... </li> 元素。

.nav-tabs > li {
  list-style-type: none;
  width: 80px;
  height: 40px;
  display: inline-block;
}
.nav-tabs > li > a {
  background-color: #ffffff;
  display: block;
  height: 100%;
  text-align: center;
  line-height: 40px;
  border: 1px solid #141414;
  box-sizing: border-box;
  color: orange;
}
.nav-tabs > li:nth-child(2) > a {
  color: blue;
}
.nav-tabs > li:nth-child(3) > a {
  color: green;
}
.nav-tabs > li.active > a {
  background-color: #7f7fff;
  color: #ffffff;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: #cc0033;
  color: #fff;
}

<ul class="nav-tabs">
  <li class="active"><a data-toggle="tab" href="#start">start </a>
  </li>
  <li><a data-toggle="tab" href="#menu1">menu1</a>
  </li>
  <li><a data-toggle="tab" href="#menu2">menu2</a>
  </li>
</ul>

【讨论】：