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;
}

但是你也需要一个类似的规则来治疗其他导航丸及其ids。这是因为ID选择器比几乎任何其他选择器“更强”。

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

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

这适用于你所有的导航丸，但它被认为是不好的做法因为！重要的是破坏了该属性的“级联样式表”中的“级联”。

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

希望有所帮助。

我在twitter bootstrap中对它们进行了不同的设置后，Nav Pills不活跃

1 个答案: