css - E > E :nth-child(2) pattern doesn't work. 如何解决？

Question

我有一个结构:

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

我想使用E > E:nth-child(n) 模式将样式应用于第一个 和第二个 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)