使用bootstrap和第n个孩子的下拉菜单样式

Question

我目前正在使用bootstrap 3框架构建一个站点，我遇到了一个问题。我正在尝试使用列表项来设置下拉列表的背景。如果我使用以下代码：

.dropdown-menu > li > a{
    background:#92a240;
    color:#fff;
}

它设置了一个绿色阴影，然后我想使用:nth-child选择器将其他链接设置为更深的绿色，我正在使用此代码：

.dropdown-menu > li > a:nth-child(odd){
    background:#b5c950;
    color:#fff;
}

然而，这使得所有链接背景都是浅色而不是奇怪的。

任何帮助将不胜感激。

感谢。

Answer 1

我猜您的html结构是这样的：

<ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

而不是这样：

<ul>
    <li>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </li>
</ul>

既然你的css是第二个html结构，我怀疑它就像那个。如果您的结构与第一个结构相似，那么......：

您应该使用a定位li，而不是定位odd：

.dropdown-menu > li:nth-child(odd) > a {}