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中没有前一个子选择器。见here

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/

在指定项目之前匹配项目

4 个答案: