nth類型的CSS選擇器層次問題

我想要一個div的背景顏色替代。紅色，黑色，紅色，黑色......這時候的元素都在同一層級工作正常，但我不能讓它在這種情況下工作：nth類型的CSS選擇器層次問題

<div class="post-preview-wrapper"> 
    <div class="post-preview"> 
     <h1>Lorem ipsum dolor sit amet.</h1> 
    </div> 
</div> 
<div class="post-preview-wrapper"> 
    <div class="post-preview"> 
     <h1>Adipisicing elit. A cumque!Lorem ipsum dolor sit amet.</h1> 
    </div> 
</div>

而CSS

.post-preview:nth-of-type(even) { 
    background-color: red; 
} 

.post-preview:nth-of-type(odd) { 
    background-color: black; 
}

任何提示如何正確設置選擇器？非常感謝！

來源

2014-02-18 psteinweber

http://jsfiddle.net/L6nwC/

您可能需要運行在容器上的第n個孩子......

.post-preview-wrapper:nth-of-type(even) .post-preview{ 
    background-color: red; 
} 

.post-preview-wrapper:nth-of-type(odd) .post-preview { 
    background-color: black; 
    color: white; 
}

來源

2014-02-18 04:53:16 superUntitled

謝謝，這很好！ – psteinweber

男人，你是一個拯救生命的人！ –

Fiddle Demo

.post-preview-wrapper:nth-of-type(even) { 
    background-color: red; 
} 

.post-preview-wrapper:nth-of-type(odd) { 
    background-color: black; 
}

來源

2014-02-18 04:50:11 Karuppiah

感謝，可惜的是應用背景的父母在我的CAS不工作即 – psteinweber

nth-of-type

Live Demo

.post-preview-wrapper:nth-of-type(even) .post-preview{ 
    background-color: red; 
} 

.post-preview-wrapper:nth-of-type(odd) .post-preview{ 
    background-color: black; 
}

nth-child也適用

Live Demo

.post-preview-wrapper:nth-child(2n) .post-preview{ /* even*/ 
    background-color: red; 
} 

.post-preview-wrapper:nth-child(2n+1) .post-preview{ /* odd */ 
    background-color: black; 
}

來源

2014-02-18 04:53:42

謝謝，這工作正常。我接受了第一個回答這個解決方案的建議。 – psteinweber

nth類型的CSS選擇器層次問題

回答

相關問題