改变特定的div，n-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 中的某处获得解决方法，并使其无需重写我的代码即可使用吗？

Answer 1

很抱歉回答迟了。

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

附加组件：如果用于首批DIV ，请添加选择器，即首批

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/