html - 具有无序列表的 CSS 第一个子伪类(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

Here is the Demo

Answer 1

使用以下内容:

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

Working jsFiddle here

您正在尝试设置第一个 .nav 项的样式 - 只有一个。只需将其更改为第一个 li 的样式，它是 .nav 的直接子级。

如果你想更具体的使用:

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