css - 在指定项目之前匹配项目

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;
}

然后我不知道如何处理楦头。

简单地说：我想匹配.child之前.parent。

Answer 1

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

您正在寻找第 n 个子选择器。 http://jsfiddle.net/mKH7j/

Answer 2

您可以使用 jquery.prev()选择器：

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

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

CSS 中没有前一个子选择器。看这里

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/