如何为每个引导导航窗格赋予不同的颜色？答案

【问题标题】：How do I give each bootstrap nav pane a distinct color?如何为每个引导导航窗格赋予不同的颜色？
【发布时间】：2018-03-07 13:37:46
【问题描述】：

我有一个带有两个引导 3 导航选项卡的 html 页面：

<!-- Nav tabs 1 -->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#foods_week" aria-controls="foods_week" role="tab" data-toggle="tab">This Week</a></li>
<li role="presentation"><a href="#foods_all" aria-controls="foods_all" role="tab" data-toggle="tab">All times</a></li>
</ul>

<!-- Tab panes 1 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foods_week"> 
       Some text here 
</div>
<div role="tabpanel" class="tab-pane" id="foods_all">
    Lorem Ipsom
</div>

</div>                       
</div>
<!-- ‌END Nav tabs 1 -->


<!-- Nav tabs 2-->
<div class="card">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#recepies_week" aria-controls="recepies_week" role="tab" data-toggle="tab">This Week</a></li>
<li role="presentation"><a href="#recepies_all" aria-controls="recepies_all" role="tab" data-toggle="tab">All times</a></li>
</ul>

<!-- Tab panes 2-->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="recepies_week"> 
    Bla blalbla 
</div>
<div role="tabpanel" class="tab-pane" id="recepies_all">
    Long story short...
</div>

</div>                       
</div>
<!-- ‌END Nav tabs 2 -->

CSS：

.nav-tabs { border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
    .nav-tabs > li > a { border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 ; background: transparent; }
        .nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-nav > li > a::after { background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:20px}

我想要给Nav tabs 2 一个不同的颜色：悬停时有红色下划线和红色文本，而不是蓝色。

我玩过 css，但没能做到。非常感谢您的帮助。

【问题讨论】：

将此添加到您的 css .card:nth-child(2) .nav-tabs > li > a:hover { color: red; }

标签： html css twitter-bootstrap navbar

【解决方案1】：

只需为每个导航添加其特定的类名或 ID。例如：

<ul id="nav-one" class="nav nav-tabs" role="tablist"></ul>
<ul id="nav-two" class="nav nav-tabs" role="tablist"></ul>
<ul id="nav-three" class="nav nav-tabs" role="tablist"></ul>

然后在您的 CSS 中复制导航类和属性并相应地更改它们。

#nav-one.nav-tabs { border-bottom: 2px solid #DDD; }
/* ... */
#nav-two.nav-tabs { border-bottom: 3px solid #CCC; }
/* ... */
#nav-three.nav-tabs { border-bottom: 4px solid #999; }
/* And etc. */

【讨论】：