css - Twitter Bootstrap 独立导航栏菜单项颜色

标签 css twitter-bootstrap navbar

<分区>

我在 Bootstrap 中有一个这样的导航栏菜单:

<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?

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

最佳答案

使用最后一个 child

.navbar-nav li:last-child {
    background: red;
}

查看这个 js-fiddle。

http://jsfiddle.net/DTcHh/2690/

关于css - Twitter Bootstrap 独立导航栏菜单项颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27581374/

相关文章:

javascript - 使用 JQuery 突出显示多个 Div 并保存模式

javascript - Angular 自定义下拉菜单

css - 添加面板标题 :hover class in bootstrap less does not change the hover color

jquery - 导航栏词缀对导航栏没有影响

html - 导航栏中的文本未水平居中/如何使 <br> 大小减半/导航栏文本之间的空间太大

Wordpress 上的 CSS 配置 <PDF 在线查看器如何禁用下载按钮>

android - 如何在 Phonegap 中针对不同的主题/布局

asp.net - 在 ASP.NET 网站中使用 css 仅显示图像并使其余页面褪色

html - 添加 Bootstrap margin

jquery - Bootstrap Navbar 展开后不折叠