0

私は構造を持っています：

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

パターンを使用して、 1番目と2番目のdivにスタイルを適用したいと思います。E > E:nth-child(n)ただし、2番目のdivでは機能せず、最初の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

2番目のdivは、からの直接の子ではありません#outer。したがって、直接の子のみを選択するため、セレクター#outer > divは2番目の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 に答える