nth類型不工作，除非html元素改變

Question

我被這個問題所驅使。我試圖通過使用nth類型來針對具有特定類的div的每個其他實例。當HTMl元素被改變時，我已經獲得了第n個類型的工作，但是當它只是div時，它就不能工作。這一定是因爲我沒有理解正確的東西，所以我感謝你的幫助！

下面是一個例子，靠近我需要什麼（除了內部分標籤應申報單）：

.employee-group { 
    border: 1px solid green; 
} 

.employee-group:nth-of-type(odd) { 
     background-color: blue; 
} 

<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 
<div class="employee-group"> 
    <p class="employee">Even .employee-group</p> 
    <p class="employee">Works as expected, no background color</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 
<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<section> 
    <p>Section</p> 
</section> 

http://codepen.io/usern4me/pen/BLZjJj

這裏是我需要做的工作方案，但對我的生活，我不能做到這一點：

.employee-group { 
    border: 1px solid green; 
} 

.employee-group:nth-of-type(odd) { 
     background-color: blue; 
} 

<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 
<div class="employee-group"> 
    <p class="employee">Odd div</p> 
    <p class="employee">But even .employee-group (shouldn't have bg color!!!)</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 
<div class="employee-group"> 
    <p class="employee">Odd</p> 
    <p class="employee">Div</p> 
</div> 
<div> 
    <p>Even</p> 
    <p>Div</p> 
</div> 

http://codepen.io/usern4me/pen/YGbwEb

看起來像是第n種類型的選擇器與類匹配，並且它是div總量中的奇數div。我希望它只是單單看班級的數量。

感謝您的幫助！

Answer 1

對於甚至.employee組問題改變.employee-group:nth-of-type(odd)到

.employee-group:nth-of-type(4n+1) 

釋：您的需求想一個奇怪的序列中跳過所有其他項目，即代替（1,3,5,7,9 ，11 ....）屬性應該命中（1,5,9,13 ....）等。爲此，我們給參數一個公式來計算，所以CSS所做的是將索引（0， 1,2,3）爲每個.employee-group元素的n，並根據公式結果計算應用屬性的位置，如

（4n + 1）=目標編號

（4x0 + 1）= 1

（4×1 + 1）= 5

（4×2 + 1）= 9

（4×3 + 1）= 13

...等等。

這應該解決你的問題，我相信。

希望這會有所幫助。