ハイレベルセレクタのn番目の子を選択してください

Question

上記の子の直接の親ではないセレクタの疑似クラスnth-childをどのように使用しますか？

HTML

<div id="main"> 
</div> 

CSS

.test { 
    width: 100px; 
    height: 100px; 
    background: red; 
} 

#main .test:nth-child(even) { 
    background: green; 
} 

JS

// doesnt work 
for (var i = 0; i < 3; i++) { 
    $('#main').append('<div><div class="test"></div></div>') 
} 
// works 
for (var i = 0; i < 3; i++) { 
    $('#main').append('<div class="test"></div>') 
} 

JSFiddle

Answer 1

あなたが.testのdivを選択したい場合は、内.testを選択し、#mainの全ての偶数子を選択する必要があります。

CSS

#main div:nth-child(even) .test { 
    background: green; 
} 

JSFiddle

Answer 2

あなたのhtml内の構造の二つの異なる種類を持っているとして、

#main .test:nth-child(even) , 
#main div:nth-child(even) > .test{ 
    background: green; 
} 

https://jsfiddle.net/9yq0bhjk/4/

をスタイリングのための別のセレクタを使用