jquery - 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="#"引用。显然，这些是不同的 .active 类。我在想每个选项卡都在不同的 super css 类下，这就是不同的 class=active 的区别，但我不确定这一点，因为每个选项卡的背景颜色似乎没有位于相应的 .积极的。为什么这些选项卡都具有 class=active 但具有不同的背景颜色？

这是jsfiddle的演示元素

demo

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

Answer 1

“常规链接”的背景色来自 .nav-pills>.active>a 而“主页”的背景色来自 .navbar .nav>.active >一个

因为它们不同，所以颜色不同，您可以轻松覆盖它们。

切勿更改原始 Bootstrap css 文件。您应该只在您想要具有不同样式的组件上重写类。