菜单css中的颜色奇数行[重复]答案

【问题标题】：Color odd lines in menu css [duplicate]菜单css中的颜色奇数行[重复]
【发布时间】：2016-09-20 01:25:09
【问题描述】：

我有一个带有下拉菜单的菜单，我想在奇数行上使用不同的颜色并应用 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>

我已经为每条奇数线添加了奇数类

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

这可能吗？

【问题讨论】：

标签： html css

【解决方案1】：

nth-child 让这一切变得简单...

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：