如何在奇数/偶数 <dd> 行之间交替背景颜色答案

【问题标题】：How could I alternate background-color between odd/even <dd> rows如何在奇数/偶数 <dd> 行之间交替背景颜色
【发布时间】：2013-06-28 19:16:16
【问题描述】：

我有一个定义列表如下：

<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 组合在一个包装器中.

有谁知道我可以实现这种交替背景效果的方法吗？

谢谢

EDIT** 我应该指出我需要术语和定义并排出现。所以每对 DT & DD 应该有交替的颜色。

【问题讨论】：

伪选择器dd:nth-child(odd) 应该这样做。要反转效果，请使用(even)
上面哪些元素应该是哪个背景色？您的问题含糊不清 - 无法判断您是否希望 Term1 为红色，Definition1 为蓝色，Term2 再次为红色等；或者如果你想要红色的 Term1 和 Definition1，蓝色的 Term2 和 Definition2，等等。
@amn - 我需要第一个 DT 和第一个 DD 为灰色，然后我需要第三个 DT 和第三个 DD 为灰色
“所以每对 DT 和 DD 应该有交替的颜色。” - 然后将奇数/偶数解决方案与选择紧跟在 dt 之后的 dd 元素结合起来使用相邻的兄弟组合，+
tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF}

标签： html css

【解决方案1】：

这对我有用：

dt, dd {
  background-color: blue;
}

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

【讨论】：

【解决方案2】：

试试

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

【讨论】：