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

Answer 2

你可以通过多种方式实现，也可以试试

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

具有无序列表的CSS第一子伪类（Bootstrap）

2 个答案: