给定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也是 child 的 body 的 child ,因此破坏了我的平衡。

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

编辑:找不到纯CSS选择器来选择遵循.class(n + 3)之类的模式的相邻项。或者,一系列无限的CSS选择器,例如div + .class + .class + .class ...:nth-child(n+3):nth-of-type(n+3)一起包装在div中;或需要JS 。你知道另一个黑客吗?分享欢迎!

最佳答案

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

从我的jsFiddle复制函数,并像这样使用:

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

您可以更改h2pair两个不同的类名,或者使用不同的模式,只要其中包含#n,并且可以选择+#,就像css nth子选择器一样。添加false作为第四个参数...
findCousin('list-title', 'list-item', '3n', false);

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

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

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

关于html - CSS选择: how to count and select child of a specific class only?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/16553961/

10-12 12:18
查看更多