如何覆盖Bootstrap活动选项卡的样式？

Question

我试图覆盖bootstrap中的活动选项卡样式.

我已经设法给标签圆角并通过给<li>标签添加一个新类来改变颜色,所以外观非常好,我想要外观和悬停.然而,活跃的标签固执地保持着引导风格.我已经尝试了各种各样的选择器来获得足够的具体但我现在被卡住了.我看不出如何更具体的活动选择器:

.nav-tabs > li.rounded.active > a,
.nav-tabs > li.rounded.active > a:hover,
.nav-tabs > li.rounded.active > a:focus {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

这是我的HTML:

<ul class="nav nav-tabs">
   <li class="rounded"><a href="#">Home</a></li>
   <li class="rounded"><a href="#">Bio</a></li>
   <li class="rounded"><a href="#">Links</a></li>
   <li class="rounded"><a href="#">Gallery</a></li>
</ul>

Answer 1

我认为你可能有一些优先考虑的其他代码,因为我在codepen.io上使用了bootstrap.css插件,一切似乎都解决了.我能够更改活动标签样式.顺便说一句,在你提供的html中,没有"活动"标签,它缺少课程.这可能是问题吗？

http://codepen.io/tylerism/pen/vOpNLO

HTML

<ul class="nav nav-tabs">
    <li class="rounded active"><a href="#">Home</a></li>
    <li class="rounded"><a href="#">Bio</a></li>
    <li class="rounded"><a href="#">Links</a></li>
    <li class="rounded"><a href="#">Gallery</a></li>
</ul>

CSS

.nav-tabs > li.rounded.active > a,
.nav-tabs > li.rounded.active > a:hover,
.nav-tabs > li.rounded.active > a:focus  {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color:orange;
}

.nav-tabs > li.rounded > a  {
    background-color:cadetblue;
    font-weight:bolder;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    color:white;
}