如何在奇偶<dd>行之间交替使用背景颜色？

Question

我有一个定义列表，如下所示：

<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-child(odd)来为每一行设置不同的背景颜色，但这在定义列表的结构中不起作用，除非我可以将每个dt和dd组合在一起放置在一个包装器中。

有人知道我如何实现这种交替的背景效果吗？

谢谢

编辑** 我应该指出需要术语和定义并排出现。因此，每对DT和DD应具有交替颜色。

- Jackson

---

伪类选择器 dd:nth-child(odd) 可以实现此效果。要反转效果，请使用 (even)。 - Kyle

以上元素中哪些应该在哪种背景颜色中？你的问题不明确 - 我们无法确定你是想要将Term1设置为红色，Definition1设置为蓝色，然后再将Term2设置为红色等；还是想要将Term1和Definition1都设置为红色，Term2和Definition2都设置为蓝色等。 - Armen Michaeli

@amn - 我需要第一个DT和第一个DD是灰色的，然后我需要第三个DT和第三个DD是灰色的。 - Jackson

"因此，每个 DT 和 DD 配对应具备交替颜色。" - 然后将奇偶解决方案与使用相邻兄弟组合器 + 选择紧随在 dt 后的 dd 元素相结合。 - CBroe

tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF} - Aravind30790

Answer 1

这对我有效：

dt, dd {
  background-color: blue;
}

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

- pzin

---

这基本上是可行的，但是与（例如更长的）DD相比，DT的背景颜色受到DT大小的限制。 - furtive

Answer 2

尝试

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

- Falguni Panchal

---

这段代码会改变所有 dt 和 dd 的颜色。 - downeyt