:具有定义列表的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;}

​

Answer 1

在HTML中,无论是dt和dd是彼此的兄弟姐妹,同一父下dl.因此,如果你在一个单元之间dt和dd单个元素之间交替dl,那么你的所有dt元素都将成为: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 }?

更新了小提琴