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

Question

鉴于所有项目处于同一级别的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 ...; 和or 一起包裹在一个div中; 或需要JS.你知道另一个黑客吗？欢迎分享!:nth-child(n+3):nth-of-type(n+3)

Answer 1

这是一个结合兄弟,nth-child和nth-last-child选择器的解决方案 .

你的每个类h2的div也应该使用一个额外的类,我称之为"颜色"和"单位",如下所示:

<div class="h2 colors">Title: Colors</div>
...
<div class="h2 units">Title: Colors</div>
...

我们申请所有孩子,他们提供一个前面的兄弟姐妹与班级h2和颜色下面的规则,将绘制粉红色的div

.h2.colors ~ .pair:nth-child(4n+4), .h2.colors ~ .pair:nth-child(4n+5) { 
    background: #FFAAAA; 
}

当然,这也将绘制低于类h2和单位 div的div .我们不希望这种情况发生.所以现在我们应用以下两个规则,以相反的顺序选择h2单位.

.h2.units ~ .pair:nth-last-child(4n+3), .h2.units ~ .pair:nth-last-child(4n+4) { 
    background: #FFAAAA; 
}

请注意,现在我们还必须应用白色背景来修复我们的第一条规则所绘的额外div.

 .h2.units ~ .pair:nth-last-child(4n+1), .h2.units ~ .pair:nth-last-child(4n+2) { 
        background: #ffffff; 
    }

当我们使用nth-last-child选择器时,唯一需要注意的是最后一组中的奇数或偶数div.

你有!

这里是小提琴一起玩

Answer 2

出于无聊和好奇，我编写了一个函数来执行此操作。如果您坚持使用 html，并且您有这样的扩展行，我的插件可能对您有用。

从我的 jsFiddle 复制该函数并像这样使用：

var pair1 = findCousin('h2', 'pair', '4n+2');
var pair2 = findCousin('h2', 'pair', '4n+3');
var s = pair1.add(pair2);

您可以更改h2两个pair不同的类名，或者使用不同的模式，只要它包含#n在其中即可，并且可以选择+#就像 css nth 子选择器一样。添加false作为第四个参数...

findCousin('list-title', 'list-item', '3n', false);

...将选择给定模式中第一个之后的所有内容list-title，而不是每个 list-item......之后的内容，如果这有意义的话。

我相信 sh0ber 已经编写了一个更实用的解决方案，但这很有趣，我不妨分享一下。

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