個別にブートストラップタブをスタイリングする

Question

私はブートストラップタブで作業していますが、別々にタブを識別するのが最善の方法であるかどうか疑問に思っていました。例えば、2つのタブの代わりに青いタブと赤いタブそれは同じように見える。

ここだけのタブのHTMLです：（注：私も反応し使用しています。）

<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; 
} 

あまりにも多くはないが、 、ハハ。どこかでクラスに追加しているかどうか、ヒントを教えてください。

Answer 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