html - 仅适用于第一个直接孩子的 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 {}

Answer 2

> 运算符意味着它将仅选择作为已定义父级的直接子级（因此深一层）的匹配子级，而不是匹配已定义父级的所有级别上的所有子级。

使用 :first-child 完全没问题，但是当涉及动态内容时，IE7 和 IE8 中可能会出现一些问题。有关已知问题，请参阅http://www.quirksmode.org/css/selectors。如有疑问，请按其 class 或 id 属性选择第一个孩子。

Answer 3

如果您将类 'nav' 更改为 'nave'，它会按原样工作！我怀疑“导航”是一个保留字。