html - 选择每个奇/偶 dt 元素，它在 dds 之后

Question

我有一个看起来像这样的定义:

<dl>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>  
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
</dl>

是否可以构建一些只针对每个奇数/偶数 dt 的选择器，并且它在 dd 之后而不引入一些包装标记？

目标是为每个 dt 和它的 dd 元素提供交替的背景颜色。

这是带有标记的链接。

http://jsbin.com/cehudaqobo/edit?html,css,js,output

我尝试了建议的解决方案，但无济于事。

Answer 1

嗯，这不是很漂亮，但您必须为潜在 dd 的数量指定“+”规则

dl dt:nth-of-type(odd),
dl dt:nth-of-type(odd) + dd,
dl dt:nth-of-type(odd) + dd + dd,
dl dt:nth-of-type(odd) + dd + dd + dd
{
  background: blue;
}
dl dt:nth-of-type(even),
dl dt:nth-of-type(even) + dd,
dl dt:nth-of-type(even) + dd + dd,
dl dt:nth-of-type(even) + dd + dd + dd
{
  background: red;
}

<dl>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt> 
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
</dl>

我觉得这个 jQuery 可以更优雅地解决您的问题 https://api.jquery.com/nextUntil/