基於元素索引的nth-child

Question

我想使用css3 nth-child來選擇基於索引的匹配元素，而不是基於父元素的整個文檔（如jquery：eq（）selector）。

<div id="container"> 
    <div class="result"> 
     <div class="active">content 1</div> 
    </div> 

    <div class="result"> 
     <div class="active">content 2</div> 
    </div> 

    <div class="result"> 
     <div class="active">content 2</div> 
    </div> 
</div> 

這個CSS代碼選擇所有元素，因爲每一個。主動的第一個孩子各自對。結果

.active:nth-child(1) { 
    background: red; 
} 

我想也使身體父

body > .active:nth-child(1) { 
    background: red; 
} 

但父它無法完成這項工作。

我想第n個孩子（1）選擇內容1 和第n個孩子（2）選擇內容2

Answer 1

我想你想使用第n個孩子上.result。

#container .result:nth-child(1) .active { 
    background: red; 
} 

JSBin