鉴于所有项目处于同一级别的html,例如：
<div class="h2">Title: Colors</div> <div class="pair">Hello world (1)</div> <div class="pair">Hello world (2)</div> <div class="pair">Hello world (3)</div> <div class="pair">Hello world (4)</div> <div class="pair">Hello world (5)</div> <div class="pair">Hello world (6)</div> <div class="h2">Title: Units</div> <div class="pair">Hello world (1)</div> <div class="pair">Hello world (2)</div> <div class="pair">Hello world (3)</div> <div class="pair">Hello world (4)</div> <div class="pair">Hello world (5)</div> <div class="pair">Hello world (6)</div>
如何从前一个.h2元素开始选择n 3和n 4 .pair元素？
因此1& 2是白色,3& 4是粉红色,5& 6是白色等.
我试过.pair：nth-child(4n 3),. pair：nth-child(4n 4){background：#FFAAAA;但它计算身体的孩子.h2也是孩子,从而打破了我的平衡.
编辑：没有找到纯CSS选择器来选择类型之后的相邻项目,例如.class(n 3).或者,一系列无限的CSS选择器,例如div .class .class .class …;在div中包装：nth-child(n 3)或：nth-of-type(n 3);或需要JS.你知道另一个黑客吗？欢迎分享！
解决方法
出于无聊和好奇心,我写了一个功能来做到这一点.如果你坚持使用html并且你有这样的扩展行,我的插件可能对你有用.
从我的jsFiddle复制函数并使用如下：
var pair1 = findCousin('h2','pair','4n+2');
var pair2 = findCousin('h2','4n+3');
var s = pair1.add(pair2);
您可以更改h2并配对两个不同的类名,或者使用不同的模式,只要它有#n,并且可选#就像css nth子选择器一样.将false添加为第四个参数……
findCousin('list-title','list-item','3n',false);
…将在给定模式中的第一个列表标题之后选择所有内容,而不是在每个列表项之后….如果这有意义.
