更改特定的 div，第 n 个子元素？

Question

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

<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 中找到一种解决方法，而不必重写我的代码？

- Kim Kakan Andersson

---

哦，是啊，之前有点着急，忘了CSS...我已经为这个小问题苦恼了几天了，但是通过自己的标签提问，不知何故我找到了帮助。所以，问题解决了！ - Kim Kakan Andersson

那么您应该发布答案。 - nice ass

Answer 1

你可以使用 nth-child 伪类来实现此操作。看一下这个演示: http://jsfiddle.net/m7uW7/2/。

- Sheixt

Answer 2

抱歉回复有点晚。

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

附加说明：如果是针对 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/

- Naheed Shareef