css 仅用于第一个直接子级

Question

我有以下 html 结构：

<div class="nav-collapse">
              <ul class="nav">

              </ul>

              <ul id="registerCart" class="nav pull-right">

              </ul>

</div>

我只想将以下规则应用于第一个导航，所以我做到了：

.nav-collapse > .nav {
    left: 135px;
}

但这也适用于 registerCart。如何仅将其应用于第一个导航？

Answer 1

使用第一个子选择器：

.nav-collapse .nav:first-child {}

如果您有更多嵌套.nav元素，您可以将其与直接子选择器结合使用。

.nav-collapse > .nav:first-child {}