Nav Pills 在我在 twitter bootstrap 中以不同的方式设置它们后没有激活

Question

我尝试设计导航药丸的样式。一切正常，除了活动状态被破坏。如何让 nav-pill 在具有新样式的第一个选项卡上处于活动状态？

<div class="container-fluid">
<div class="row clearfix">
    <div class="col-md-12 column">
        <div class="tabbable" style="text-align: center;">
            <ul class="nav nav-pills">
                <li class="active"> <a href="#9" id="menu-webinars" data-toggle="tab"><h1>Webinars</h1></a>
                </li>
                <li>    <a href="#10" id="menu-case-review" data-toggle="tab"><h1>Case Review Sessions</h1></a>

                </li>
                <li>    <a href="#11" id="menu-networking-meetups" data-toggle="tab"><h1>Networking Meetups</h1></a>

                </li>
                <li>    <a href="#12" id="menu-certification" data-toggle="tab"><h1>Certification</h1></a>

                </li>
            </ul>

这是css（我知道它很丑）

#menu-webinars {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-webinars:hover {
background-color: #1abc9c;
}

#menu-webinars:focus {
background-color: #1abc9c;
}

#menu-webinars:focus h1 {
color: #fff;
}

#menu-webinars:hover h1 {
color: #fff;
}

#menu-webinars h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-case-review {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-case-review:hover {
background-color: #e4a824;
}

#menu-case-review:hover h1 {
color: #fff;
}

#menu-case-review:focus {
background-color: #e4a824;
}

#menu-case-review:focus h1 {
color: #fff;
}

#menu-case-review h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-networking-meetups {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-networking-meetups:hover {
background-color: #326699;
}

#menu-networking-meetups:hover h1 {
color: #fff;
}

#menu-networking-meetups:focus {
background-color: #326699;
}

#menu-networking-meetups:focus h1 {
color: #fff;
}

#menu-networking-meetups h1 {
color: #545454;
    margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

#menu-certification {
color: #326799;
background-color: #ebedef;
border-radius: 0;
}

#menu-certification:hover {
background-color: #d8782e;
}

#menu-certification:hover h1 {
color: #fff;
}

#menu-certification:focus {
background-color: #d8782e;
}

#menu-certification:focus h1 {
color: #fff;
}

#menu-certification h1 {
color: #545454;
margin-top: -13px;
margin-bottom: 10px;
line-height: 21px;
font-size: 21px;
}

Answer 1

您的问题在于特异性（如果您有兴趣了解更多信息，请参阅http://css-tricks.com/specifics-on-css-specificity/）。您的#menu-webinars 选择器正在覆盖活动类背景颜色。

您可以通过添加这样的选择器来修复它：

li.active > #menu-webinars {
    background-color: #0000FF;
}

但是您还需要对其他导航药丸及其 ID 使用类似的规则。这是因为 ID 选择器比几乎任何其他选择器都“更强”。

另一种方法是添加如下内容：

li.active > a {
    background-color: #0000FF !important;
}

这将适用于您的所有导航药丸，但它被认为是不好的做法，因为 !important 会破坏该属性的“级联样式表”中的“级联”。

最好的（但也是最长的）解决方案是停止在 CSS 中使用如此多的 ID 选择器。 ID 选择器不好，因为它们只能应用于一个元素（因为在 HTML 中没有两个元素可以具有相同的 ID）。最好使用类名或元素选择器来设置样式。

希望对您有所帮助。