匹配项之前指定项目

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/