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>

为每个引导活动选项卡（CSS）更改为不同的颜色

1 个答案: