html - 具有无序列表的 CSS first-child 伪类 (Bootstrap)

Question

我正在尝试在作为无序列表的第一个子项的列表项上呈现背景颜色。

HTML结构如下

<div class="nav-collapse">
    <ul class="nav">
      <li><a href="#">test 1</a></li>
      <li><a href="#">test 2</a></li>
      <li><a href="#">test 3</a></li>
    </ul>
</div> 

并在我做的第一个子元素上应用背景颜色

.nav-collapse > .nav:first-child {
    background-color: orange;
}

它为所有列表项呈现橙色背景。我玩过一些细微的变化，但没有什么区别。

.nav-collapse > ul.nav:first-child
.nav-collapse > ul:first-child

这是演示

Answer 1

使用以下内容：

.nav > li:first-child {
    background-color: orange;
}

在这里工作 jsFiddle

您试图设计第一个.nav项目的样式 - 只有一个。只需将其更改为样式第一个li是.nav.

如果您想更具体地使用：

.nav-collapse > .nav > li:first-child {
    background-color: orange;
}

Answer 2

您可以通过多种方式做到这一点，也可以尝试一下

ul.nav > li:first-child {
    background-color: orange;
}