E > E:nth-child(2) 模式不起作用。如何解决？

Question

我有一个结构：

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

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

/* 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
}

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

Answer 1

试试这个：

#outer > div:nth-child(1) > div:nth-child(1)

Answer 2

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

/* 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
}