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> 

如何選擇第n + 3和n + 4 .pair元素從以前.h2元素開始？

所以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 ...; 將與:nth-child(n+3)或:nth-of-type(n+3)連在一起;或需要JS。你知道另一個黑客？歡迎分享！

Answer 1

出於無聊和好奇我寫了一個函數來做到這一點。如果你堅持使用html，並且你已經像這樣擴展了行，我的插件可能對你有用。

複製從我的jsfiddle的功能及使用方法如下所示：

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

可以，只要它有它#n改變h2和pair兩個不同的類名，或使用不同的圖案，以及可選+#剛像css nth子選擇器一樣。作爲第四個參數添加false ...

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

...將在第一個list-title後按給定的模式選擇所有內容，而不是在之後，每個list-item ....如果這是有道理的。

我相信sh0ber已經寫出了一個更實用的解決方案，但這很有趣，我也可以分享。

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

Answer 2

如果我們想只第3和各.h2後4 .pair，那麼這將工作：

.h2 + .pair + .pair + .pair, 
.h2 + .pair + .pair + .pair + .pair { background: #FFAAAA; } 

如果我們想用兩個甚至更長單繼續交替，我們需要另一種方案

---

編輯：因爲我們確實需要一個可擴展的解決方案，如果我們能夠通過包裝的.pair項目每個塊與其它類稍微改變標記：

<div class="h2 colors">Title: Colors</div> 
<div class="pairList"> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    <div class="pair">Hello world</div> 
    ... 
</div> 

然後，我們可以寫一個規則這將擴大像項目的任何金額：

.pairList .pair:nth-of-type(4n+3), 
.pairList .pair:nth-of-type(4n+4) { 
    background: #FFAAAA; 
} 

Here is a FIDDLE

Answer 3

這是結合兄弟，第n個孩子和第n-最後孩子選擇的解決方案。

您的每一個的div類h2的也應該使用一個額外的類，我會打電話給「顏色」和「單位」 像這樣：

<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; 
} 

當然這也將畫下這些div div類h2和單位。我們不希望發生這種情況。 因此，現在我們應用以下兩條規則，按逆序選擇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; 
    } 

照顧唯一的事情是奇數或偶數當我們使用第n個最後一個子選擇器時，最後一個組中的div的數量。

你在那裏！

這裏是fiddle與