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

これは私のために働く：

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; }