jquery - 为每个 Bootstrap 事件选项卡更改为不同的颜色 (CSS)

Question

我可以成功地更改事件选项卡和非事件选项卡作为一个组的颜色，但是是否可以对每个单独的选项卡执行此操作？

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

这是当前的工作代码:

 .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>

编辑 我现在已经按照下面 Charlie 的建议向“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;
}

Answer 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>