菜单css中的奇数行颜色

Question

我有一个菜单，其中我想在奇数行上使用不同的颜色并应用css来实现此目的。因此第一行和第三行是相同的颜色，第二行和第四行是另一种颜色。

这是我的菜单：

<ul class="nav navbar-nav"> 
    <li><a title="home">home</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">option <b class="caret"></b></a> 
     <ul class="dropdown-menu"> 
      <li><a title="option1">option1</a></li> 
      <li><a title="option2">option2</a></li> 
      <li><a title="option3">option3</a></li> 
      <li><a title="option4">option4</a></li> 
     </ul> 
    </li> 
</ul> 

我已经添加oddChild类每奇数行是颜色，我想这样做

.dropdown-menu < odd { 
    background-color: white; 
} 

的line..but这是可能的？

Answer 1

nth-child使得这个简单的CSS ...

.dropdown-menu li:nth-child(2n)或.dropdown-menu li:nth-child(odd)

.dropdown-menu li:nth-child(2n) { background: #a00; }

<ul class="nav navbar-nav"> 
 
        <li><a title="home">home</a></li> 
 

 
        <li class="dropdown"> 
 
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">option <b class="caret"></b></a> 
 
             <ul class="dropdown-menu"> 
 
                 <li><a title="option1">option1</a></li> 
 
                 <li><a title="option2">option2</a></li> 
 
                 <li><a title="option3">option3</a></li> 
 
                 <li><a title="option4">option4</a></li> 
 
             </ul> 
 
        </li> 
 
</ul>

Answer 2

使用伪类:nth-child(odd)和:nth-child(even)

.dropdown-menu > li:nth-child(odd) { 
    background-color: white; 
} 

Answer 3

.dropdown-menu > li:nth-child(odd) { 
 
        background-color: skyblue; 
 
}

<ul class="nav navbar-nav"> 
 
        <li><a title="home">home</a></li> 
 

 
        <li class="dropdown"> 
 
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">option <b class="caret"></b></a> 
 
             <ul class="dropdown-menu"> 
 
                 <li><a title="option1">option1</a></li> 
 
                 <li><a title="option2">option2</a></li> 
 
                 <li><a title="option3">option3</a></li> 
 
                 <li><a title="option4">option4</a></li> 
 
             </ul> 
 
        </li> 
 
</ul>