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

这可能吗？

Answer 1

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

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

Answer 2

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>

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>

菜单css中的彩色奇数行

3 个答案: