css - 更改特定的 div，nth-child？

Question

我这里有问题。我div的代码中提到了 4 次，例如：

<div class='box1'>
Hello 1
</div>
<div class='box1'>
Hello 2
</div>
<div class='box1'>
Hello 3
</div>
<div class='box1'>
Hello 4
</div>

我想对这个div类做一些改变，但只有最后一个。我不能让第n班工作，看来我需要做一张ul桌子才能工作？我可以在CSS中的某个地方找到解决方法并使其工作而无需重写我的代码吗？

score 5 · Accepted Answer

您应该能够使用nth-child伪类来做到这一点。看看这个演示：http: //jsfiddle.net/m7uW7/2/

score 0 · Accepted Answer

抱歉回答有点晚了。

要对Last-DIV进行任何更改，您只需要简单地添加一个选择器，即:last-of-type在 CSS 中进行更改。

附加组件：如果是First-DIV，添加一个选择器，即first-of-type

HTML：

   <div class="box1">
  Hello 1
</div>
<div class="box1">
  Hello 2
</div>
<div class="box1">
  Hello 3
</div>
<div class="box1">
  Hello 4
</div>

CSS：

div.box1:first-of-type {
  color: #fff;
  background-color: green;
}
div.box1:last-of-type {
  color: #fff;
  background-color: blue;
}

编辑： https://jsfiddle.net/naheedshareef/09dwtfpu/8/

2 回答 2