css nth-child（）和nth-of-type

Question

的說明我正在嘗試爲employee類的10個元素的每一個分配不同的背景圖像。在HTML的層次結構如下：

<div class="crew-row"> 
    <div class="employee"></div> 
    <div class="employee"></div> 
</div> 
<div class="crew-row"> 
    <div class="employee"></div> 
    <div class="employee"></div> 
    <div class="employee"></div> 
    <div class="employee"></div> 
</div> 
<div class="crew-row"> 
    <div class="employee"></div> 
    <div class="employee"></div> 
    <div class="employee"></div> 
    <div class="employee"></div> 
</div> 

，所以我想我可以使用這樣的事情在我的CSS：

employee:nth-of-type(1){ 
    background-image: url('../images/people/1.png'); 
} 
.employee:nth-of-type(2){ 
    background-image: url('../images/people/2.png'); 
} 
.employee:nth-of-type(3){ 
    background-image: url('../images/people/3.png'); 

} 
.employee:nth-of-type(4){ 
    background-image: url('../images/people/4.png'); 
} 
.employee:nth-of-type(5){ 
    background-image: url('../images/people/5.png'); 

} 
... 

或

.employee:nth-child(1){ 
    background-image: url('../images/people/1.png'); 
} 
.employee:nth-child(2){ 
    background-image: url('../images/people/2.png'); 
} 
.employee:nth-child(3){ 
    background-image: url('../images/people/3.png'); 

} 
.employee:nth-child(4){ 
    background-image: url('../images/people/4.png'); 
} 
.employee:nth-child(5){ 
    background-image: url('../images/people/5.png'); 

} 
... 

，但發生的事情是，即使在我爲employee的其餘部分添加任何其他代碼之前，他們已經分配了以前的背景圖像... 任何想法什麼是正確的方式來分配不同的background-image到每個employee元素？

Answer 1

的:nth-*僞類匹配的元素。所以，你可以這樣做：

.crew-row:nth-child(1) .employee:nth-child(1) { } 
.crew-row:nth-child(1) .employee:nth-child(2) { } 

.crew-row:nth-child(2) .employee:nth-child(1) { } 
.crew-row:nth-child(2) .employee:nth-child(2) { } 
.crew-row:nth-child(2) .employee:nth-child(3) { } 
.crew-row:nth-child(2) .employee:nth-child(4) { } 

/* and so on */ 

不過，我寧願擺脫.crew-row元素（他們似乎並不這麼爲人民服務不是分組在不同的行員工的其他用途），並使用:nth-child於（i）指定的背景圖片（ii）將第3，第7，第11，...員工推到新的一排。第n-child`或`：

Answer 2

employee:nth-of-type(1){ 
    background-image: url('../images/people/1.png'); 
} 

在上面的代碼中，employee:nth-of-type(1)指定用於與類名employee每<div>元件，它是其父的第一個子的背景。

因此，以上代碼背景下面div將被更改。

這是因爲所有紅色標記的div是第一個孩子它的父。

Answer 3

添加單獨的類如.employee-1.employee-2等等可能是一個更好的主意。 nth-child和nth-of-type僅在元素是彼此的直接兄弟節點時才起作用。所以你的情況，他們被包裹在.crew-row，因此nth-child(1)將每一行中選擇第一個僱員...

nth-child和nth-of-type之間的區別僅僅是nth-of-type選擇特定類型的數n。例如。

<div class="crew-row"> 
    <span class="employee"></span> 
    <div class="employee"></div> 
    <div class="employee"></div> <!-- trying to select this one --> 
</div> 


div:nth-child(2) { } /* Not working */ 
div:nth-of-type(2) { } /* Working */ 

如果你仍然想nth-child工作，你可以做這樣的：

.crew-row:nth-child(1) .employee:nth-child(1) {} /* select first employee in first row */ 
.crew-row:nth-child(1) .employee:nth-child(2) {} /* select second employee in first row */ 
.crew-row:nth-child(2) .employee:nth-child(1) {} /* select first employee in second row */ 
/* and so on */ 

但同樣的，可能是更好的只是添加類.employee- [n]和分配背景的這些類

<div class="employee employee-1"></div> 
.employee.employee-1{ 
    background-image: url('../images/people/1.png'); 
} 

Answer 4

您可以結合html5，css和js來獲得該效果。你可以堆疊它們（html5允許多個背景圖像堆疊在一起）並使用javascript或jquery - 遍歷每個div並更改堆疊圖像的z-index。或者將其綁定到滾動事件，並且當用戶滾動經過某個點時，觸發z-index更改，以便下一個div具有修改的背景圖像。

Answer 5

我認爲你將不得不使用jQuery的基於它們相對於他們的父母，而不是整個文件第n個位置「每個」功能

$('.employee').each(function(index) { 
 
    var i = index % 5; 
 
    if (i == 0) { 
 
    $(this).css("background-color", "#ff0000"); 
 
    } else if (i == 1) { 
 
    $(this).css("background-color", "#00ff00"); 
 
    } else if (i == 2) { 
 
    $(this).css("background-color", "#0000ff"); 
 
    } else if (i == 3) { 
 
    $(this).css("background-color", "#ffff00"); 
 
    } else if (i == 4) { 
 
    $(this).css("background-color", "#00ffff"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="crew-row"> 
 
    <div class="employee">1</div> 
 
    <div class="employee">2</div> 
 
</div> 
 
<div class="crew-row"> 
 
    <div class="employee">3</div> 
 
    <div class="employee">4</div> 
 
    <div class="employee">5</div> 
 
    <div class="employee">6</div> 
 
</div> 
 
<div class="crew-row"> 
 
    <div class="employee">7</div> 
 
    <div class="employee">8</div> 
 
    <div class="employee">9</div> 
 
    <div class="employee">10</div> 
 
</div>