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>