0

我有一个结构：

<div id="outer">
    <div> <!-- first div -->
        <div>  <!-- second div -->
        </div>
    </div>
</div>

我想使用模式将样式应用于第一个和第二个div E > E:nth-child(n)。但它不适用于第二个div，仅适用于第一个。

/* this works */
#outer > div:nth-child(1) {
    border: 1px solid red;
    padding: 10px;
}

/* this doesn't work */
#outer > div:nth-child(2) {
    border: 1px solid green;
    padding: 10px
}

为什么不起作用？我怎样才能让它工作？

4

2 回答 2

2

试试这个：

#outer > div:nth-child(1) > div:nth-child(1)
于 2012-11-21T15:15:59.957 回答
1

第二个 div 不是来自#outer. 因此，您的选择器#outer > div不会影响第二个 div，因为>仅选择直接子级。也许你可以使用

/* this works */
#outer > div:nth-child(1) {
    border: 1px solid red;
    padding: 10px;
}

/* this should also work */
#outer > div:nth-child(1) > div:nth-child(1) {
    border: 1px solid green;
    padding: 10px
}
于 2012-11-21T15:16:35.967 回答