bootstrap-combined.min.css - どのように2つのタブ（異なるタブコントロール内にある）がそれぞれクラス=アクティブで背景色が異なるのですか？

Question

私はCSSのロジックを理解しようとしています.jsfiddleのブートストラップタブコントロールのサンプルプロジェクトでは、いくつかのアクティブリストが入っているbootstrap-combined.min.cssが使用されています。ここで私を混乱さプロジェクトコードのサンプルです：

<div class="nav-collapse"> 
     <ul class="nav"> 
     <li class="active"><a href="#">Home</a></li> 
     ...... 
     </ul> 
    </div> 

    ... 

    <ul class="nav nav-pills"> 
     <li class="active"><a href="#">Regular link</a></li> 
    ....... 
    </ul> 

ホームと正規のリンクの両方がクラス=アクティブおよびHREF =「＃」によって参照されています。これらはまったく異なるアクティブなクラスです。私は、各タブは異なるスーパーCSSクラスの下にあり、それは異なるクラス=アクティブが区別される方法だと思っていますが、それぞれのタブの背景色がそれぞれに位置するようには見えないので、アクティブ。これらのタブはどちらもclass = activeですが、背景色はどのように異なっていますか？私はこれらの背景色を変更したいとすべきであるIので、ここ

はjsfiddle

demo

でのデモプロジェクトは、私が知りたい理由は（私はよりよいCSSを理解したいだけではないということ）でありますbootstrap-combined.min.cssを変更するか、別のCSSファイルを作成して別の.activeクラスを参照するだけですか？私のプロジェクトの中にいくつかのCSSを追加するだけですか？ 「ホーム」の背景色があるので.navbar .nav>.active>a

から来ているのに対し「正規のリンク」の

Answer 1

背景色が.nav-pills>.active>aから来て、彼らは、異なる色が異なっていて、あなたは簡単にそれらを上書きすることができます。

元のブートストラップのCSSファイルを変更しないでください。異なるスタイルを使用するコンポーネントでのみ、クラスをオーバーライドする必要があります。