：第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