CSS选择：如何统计和选择特定类的子级？

鉴于所有项目处于同一级别的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也是孩子,从而打破了我的平衡.

http://jsfiddle.net/zPYcy/2/

编辑：没有找到纯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);

…将在给定模式中的第一个列表标题之后选择所有内容,而不是在每个列表项之后….如果这有意义.

我相信sh0ber已经写了一个更实用的解决方案,但这很有趣,我也可以分享.

http://jsfiddle.net/REU33/6/

原文地址：https://www.jb51.cc/css/242196.html