我有一个如下所示的定义:
<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,输出
我尝试了建议的解决方案,但没有成功。
嗯,这不太漂亮,但你必须为潜在 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/
<style>
dd:nth-child(even){ background-color:green;}
</style>