css - CSS を使用して、その親に相対的な n 番目の要素を取得します

Question

ドキュメントに対してではなく、親に対して n 番目の要素のスタイルを設定したい。これを得ました：

CSS:

ul li:nth-child(2n){ background: #fff; }

html:

<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>
<ul>
<li></li>
<li></li> // background is white
<li></li>
</ul>

この場合、すべての 2 番目の要素は白い背景を取得し、ドキュメントからカウントを開始します。要素が親要素「ul」を取得したかどうかは問題ではありません。

ここで、各「ul」要素でカウントがリセットされるようにします。結果は次のようになります。

<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>
<ul>
<li></li> // background is white
<li></li>
<li></li> // background is white
</ul>

誰でも私を助けることができますか？

Answer 1

ul > li:nth-child(2n) {background: #fff;}

ただし、これは必要ないはずです。元のコードは正常に動作します: http://jsfiddle.net/isherwood/5MKtK

Answer 2

この n 番目の型 と直接の子孫セレクターを使用する

ul >li:nth-of-type(2n){ background: #fff; }

ツール: http://css-tricks.com/examples/nth-child-tester/