Twitter Bootstrap个性化导航栏菜单项颜色

Question

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只针对最后一个菜单项进行定位，并覆盖Bootstrap的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;
}

- lowercase

Answer 1

使用last-child

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

请查看这个js-fiddle。

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

- Jørgen

---

完美。感谢您的帮助。 - lowercase

Answer 2

是的，你可以使用:last-child伪选择器来实现这个功能，如下所示：

.navbar-nav > li > a {
    color: blue;
}
.navbar-nav > li:last-child > a {
    color: green;  
}

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

- Casey Rule

Answer 3

使用此代码:not()。

.navbar-default .navbar-nav > li:not(:last-child) > a

演示 - http://jsfiddle.net/victor_007/rm4wqua7/

它不会为:last-child提供样式

或覆盖:last-child子元素的样式

.navbar-default .navbar-nav > li:last-child > a

示例 - http://jsfiddle.net/victor_007/rm4wqua7/1/

- Vitorino fernandes