Question

我有以下基于Twitter的Bootstrap的代码：

<ul class="nav nav-tabs" id="myTab" style="border-bottom-color: black">
  <li class="active"><a href="#tab1" data-toggle="tab">Tab1</a></li>
  <li><a href="#tab2" data-toggle="tab">Tab2</a></li>
  <li><a href="#tab3" data-toggle="tab">Tab3</a></li>
  <li><a href="#tab4" data-toggle="tab">Tab4</a></li>
</ul>

我能够根据自己的需要定制几乎所有的CSS。

我坚持的部分是<li class="active">，覆盖它的css规则是什么？

Answer 1

ul.nav.nav-tabs > li.active {
    color: red;
}

我认为应该这样做，或者如果你只想在那个特定的导航中定位li

#myTab > li.active {

}

Answer 2

如果您只想为此特定导航覆盖它，您只需将ID包含在CSS规则中：

#myTab > li.active{
    /* Your CSS goes here */
}

Answer 3

li.active是该标记的规则。请记住，css规则是按照文件链接的顺序运行的，因此如果要覆盖它，只需在 bootstrap.css之后链接的css文件中添加li.active规则。你也可以编辑bootstrap.css

自定义Bootstrap的Tab类li .active

3 个答案: