Question

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

Answer 1

使用last-child

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

看到这个js-fiddle。

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

Answer 2

是的，您可以使用:last-child伪选择器执行此操作，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

使用此:not()

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

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

它不会为:last-child

提供样式

或:last-child孩子的owerite样式

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

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

Twitter Bootstrap单独导航栏菜单项颜色

3 个答案: