html - 我怎么能在奇数/偶数之间交替背景颜色行

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 应该有交替的颜色。

Answer 1

This works for me:

dt, dd {
  background-color: blue;
}

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

Answer 2

尝试

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