给定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);
您可以更改
h2
和pair
两个不同的类名,或者使用不同的模式,只要其中包含#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/