css - Nav Pills 在我在 twitter bootstrap 中设置不同样式后不活跃

Question

我尝试设计导航丸的样式。除了事件状态被破坏外，一切正常。如何使用新样式让导航栏在第一个选项卡上处于事件状态？

<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)。最好使用类名或元素选择器来设置样式。

希望对您有所帮助。