html - :nth-child() 定義リストを持つ奇数/偶数疑似クラス

Question

:nth-child()奇数/偶数疑似クラスを定義リストに適用する方法がわかりません

<dl>
    <dt>green foo</dt>
    <dd>green bar</dd>
    <dt>red foo</dt>
    <dd>red bar</dd>
    <dt>green foo</dt>
    <dd>green bar</dd>
</dl>

<style>
dl { color: blue }
dd:nth-child(odd) { color:green }
dd:nth-child(even) { color:red }​
</style>

http://jsfiddle.net/8Ge5h/2/

新しいフィドル:

http://jsfiddle.net/8Ge5h/7/

正しい :nth-of-type 疑似クラスで。

dd:nth-of-type(even) {color: red;}
dt:nth-of-type(even) {color: red;}
dd:nth-of-type(odd) {color: green;}
dt:nth-of-type(odd) {color: green;}

</p>

Answer 1

HTML では、dtとddは同じ親の下にある兄弟ですdl。そのため、単一の でdtとを交互に使用している場合、すべての要素は になりますが、すべての要素は になります。dddldt:nth-child(odd)dd:nth-child(even)

:nth-of-type()おそらく代わりに探しているでしょう。これは、dtまたはタイプのいずれかのみをチェックするのに役立ちます。これは、要素の種類を気にせず、親に対する位置のみを気にするのddとは異なります。:nth-child()

ddすべての奇数の緑とすべての偶数の赤を作りたい場合dd:

dd:nth-of-type(odd) { color:green }
dd:nth-of-type(even) { color:red }​

更新されたフィドル