单独设置引导选项卡的样式答案

【问题标题】：Styling Bootstrap Tabs individually单独设置引导选项卡的样式
【发布时间】：2016-06-27 14:58:34
【问题描述】：

我正在使用 Bootstrap 选项卡，我想知道单独识别选项卡的最佳方法是什么，以便我可以设置不同的样式 - 例如，有一个蓝色选项卡和一个红色选项卡，而不是两个看起来相同的选项卡.

这是仅用于选项卡的 HTML：（注意：我也在使用 react。）

<ul className="nav nav-tabs">
            <li className="active"><a data-toggle="tab" href="#menu1">This is the headline of one article</a></li>
            <li className="tab"><a data-toggle="tab" href="#menu2">Menu 2</a></li>
 </ul>

这是我目前拥有的 CSS：

.nav-tabs>li>a {
    background-color: #3999C9;
    color:red;
    font-family:Fira Sans;
}

.nav-tabs {
    font-family:Fira Sans;
    border-bottom: 1px solid #10122B;
}

不多，哈哈。感谢任何提示，无论是在某处添加课程还是其他什么。

【问题讨论】：

我没有关注这就是问题所在。您可以为不同类型的选项卡添加不同的类名。所以可以是<li className="tab red-tab">...</li>等等，然后为这些类定义样式。

标签： css twitter-bootstrap reactjs tabs

【解决方案1】：

好吧，只需使用 css 选择器：

.nav-tabs li:nth-of-type(1) a { ... } // first tab
.nav-tabs li:nth-of-type(2) a { ... } // 2nd
.nav-tabs li:nth-of-type(3) a { ... } // etc

【讨论】：