匹配項之前指定項目

Question

我有以下列表：

<ul> 
    <li class="parent">1.</li> 
    <li class="child">1. first</li> 
    <li class="child">1. second</li> 
    <li class="child">1. third</li> 

    <li class="parent">2.</li> 
    <li class="child">2. first</li> 
    <li class="child">2. second</li> 
    <li class="child">2. third</li> 
    <li class="child">2. fourth</li> 
    <li class="child">2. fifth</li> 

    <li class="parent">3.</li> 
    <li class="child">3. first</li> 
    <li class="child">3. second</li> 
    <li class="child">3. third</li> 
    <li class="child">3. fourth</li> 

    <li class="parent">4.</li> 
    <li class="child">4. first</li> 
    <li class="child">4. second</li> 
    <li class="child">4. third</li> 
</ul> 

我想設置特定背景first和最後一個元素。雖然我與first沒有問題：

.parent + .child { 
    background-color: whitesmoke; 
} 

話，我不知道該怎麼辦與持續。

簡單地說：我想在.parent之前匹配.child。

Answer 1

你可以使用jQuery的.prev()選擇：

$('.parent').prev().css("background-color", "red");

http://jsfiddle.net/gC53q/1/

CSS中沒有先前子選擇器。見here

Answer 2

li:nth-child(2n+2) { 
    background-color: whitesmoke; 
} 

您正在尋找nth-child選擇器。 http://jsfiddle.net/mKH7j/

Answer 3

你想第三的三個子選擇的，所以選擇第三個兄弟姐妹：

.child + .child + .child { background-color: red; }

http://jsfiddle.net/gC53q/

Answer 4

這裏是一個沒有jQuery的：

li:nth-child(2n) { background: red; } 
li:nth-child(4n) { background: whitesmoke; } 

這裏是一個演示：http://jsfiddle.net/G8vCZ/1/