选择每个奇/偶dt元素及其后面的dds

问题描述 投票:0回答:2

我有一个如下所示的定义:

<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,输出

我尝试了建议的解决方案,但没有成功。

html css css-selectors
2个回答
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/


0
投票
<style>
dd:nth-child(even){ background-color:green;}
</style>
© www.soinside.com 2019 - 2024. All rights reserved.