澄清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-*伪类匹配元素基于它们相对于父元素的第n个位置，而不是整个文档。所以你可以这样做：

.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，......员工推到新的一行。

Answer 2

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

在上面的代码中，employee:nth-of-type(1)为每个<div>元素指定了一个背景，其中类名为employee，这是其父级的第一个子级。

因此，在上面的代码中，将更改以下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。 E.g。

<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的“每个”功能

$('.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>