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

＆gt;运算符意味着它将仅选择匹配的子节点，这些子节点是已定义父节点的直接子节点（因此深度为一级），而不是匹配已定义父节点的所有级别上的所有子节点。

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

Answer 3

如果您将类“ nav”更改为“ nave”，则按原样运行！我怀疑“ nav”是保留字。