：第n个孩子（）奇/偶伪类与定义列表

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/

用正确的：第n-的方式伪类。

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下。因此，如果您在单一dl之间交替使用dt和dd，那么您所有的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 }​ 

Updated fiddle