bootstrap-combined.min.css - 两个标签（在不同的标签控件中）如何具有class = active并具有不同的背景颜色？

Question

我正在尝试理解css逻辑 - 而jsfiddle的Bootstrap Tab Control示例项目正在使用bootstrap-combined.min.css，其中包含几个.active列表。以下是令我困惑的项目代码示例：

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

主页和常规链接均由class = active和href =＆＃34;＃＆＃34;引用。显然，这些是不同的。活动类。我认为每个选项卡都在一个不同的超级css类下，这就是如何区分不同的class = active，但我不确定，因为每个选项卡的背景颜色似乎没有相应的位置。活性。这些标签如何具有class = active但具有不同的背景颜色？

这是jsfiddle的演示项目

demo

我想知道的原因是（不仅仅是我想更好地理解css）因为我想修改这些背景颜色，我应该修改bootstrap-combined.min.css还是应该创建另一个css文件在那里引用一个不同的.active类？或者只是在我的项目中添加一些css？

Answer 1

“常规链接”的背景颜色来自.nav-pills>.active>a，而“首页”的背景颜色来自.navbar .nav>.active>a

由于它们不同，颜色不同，您可以轻松覆盖它们。

永远不要在原始bootstrap css文件中进行更改。您应该仅对希望具有不同样式的组件覆盖类。