Twitter Bootstrap单个导航栏菜单项颜色 [英] Twitter Bootstrap individual navbar menu item colors
本文介绍了Twitter Bootstrap单个导航栏菜单项颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在Bootstrap中有一个导航栏菜单,如下所示:
I have a navbar menu in Bootstrap like this:
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Menu Item 1</li>
<li><a href="#">Menu Item 2</a></li>
<li><a href="#">Menu Item 3</a></li>
<li><a href="#">Change Color of this Menu Item</a></li>
</ul>
我想更改最终列表项目的颜色,以使其不继承标准的颜色/悬停属性.是否可以通过CSS定位最终菜单项并覆盖我的Bootstraps CSS?
I would like to change the color of the final list item so it does not inherit the standard color/hover properties. Is it possible to target just the final menu item via CSS and override my Bootstraps CSS?
我的CSS在这里:
.navbar-default .navbar-nav > li > a {
color: #ffffff;
font-family: "Fjalla One", sans-serif;
text-transform: uppercase;
font-size: 17px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #0091c1;
background-color: transparent;
}
推荐答案
使用最后一个孩子
.navbar-nav li:last-child {
background: red;
}
请参阅此js小提琴.
http://jsfiddle.net/DTcHh/2690/
这篇关于Twitter Bootstrap单个导航栏菜单项颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文