Twitter Bootstrap individual navbar menu item colors [duplicate]

寵の児 提交于 2021-02-10 02:42:35

问题


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>

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?

My CSS here:

.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;
}

回答1:


use last-child

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

see this js-fiddle.

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




回答2:


Yes, you can do this with the :last-child pseudo selector, like this:

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



回答3:


Use this :not()

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

demo - http://jsfiddle.net/victor_007/rm4wqua7/

it will not give styles for :last-child

or owerite styles for :last-child child

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

demo - http://jsfiddle.net/victor_007/rm4wqua7/1/



来源:https://stackoverflow.com/questions/27581374/twitter-bootstrap-individual-navbar-menu-item-colors

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!