怎麼可能奇/偶<dd>行

我有一個定義列表如下之間交替我的背景色：怎麼可能奇/偶<dd>行

<dt>Term1</dt> 
<dd>Definition1</dd> 
<dt>Term2</dt> 
<dd>Definition2</dd> 
<dt>Term3</dt> 
<dd>Definition3</dd> 
<dt>Term4</dt> 
<dd>Definition4</dd>

我想用CSS使用nth-給每個奇數行不同的背景顏色子（奇數），但這不適用於定義列表的結構，除非我可以將每個dt和dd在一起包裝在一起。

有沒有人知道我可以實現這種交替背景效果的方法？

感謝

編輯**我應該指出，我需要的期限和並排出現一側的定義。所以每一對DD都應該有交替的顏色。

來源

2013-06-28 Jackson

僞選擇'DD：第n個孩子（奇數）'應該這樣做。要扭轉這種效果，請使用'（偶數）' – Kyle

上述哪些元素應該在哪種背景顏色下？你的問題是模棱兩可的 - 你不可能知道你是否想要紅色的Term1，藍色的Definition1，再次是紅色的Term2，等等。或者如果你想要Term1和Definition1是紅色的，Term2和Definition2是藍色的，等等。 – amn

@amn - 我需要第一個DT和第一個DD是灰色的，然後我需要第三個DT和第三個DD是灰色的 – Jackson

這個工作對我來說：

dt, dd { 
    background-color: blue; 
} 

dt:nth-child(4n+1), dt:nth-child(4n+1) + dd { 
    background-color: red; 
}

來源

2013-06-28 11:16:16 pzin

很酷的感謝！這是我需要的 – Jackson

這大部分工作，但DT的背景顏色受限於DT的大小（與較長的DD相比）。 – furtive

嘗試

dt:nth-child(odd){ background-color:#eee; } 
    dd:nth-child(even){ background-color:#fff; }

來源

2013-06-28 11:01:22 falguni

這不行，我需要它的方式:( – Jackson

這段代碼改變了所有dt的顏色，所有的dd。 – downeyt

怎麼可能奇/偶<dd>行

回答

相關問題