如何使用 CSS 正确选择第一个或最后一个孩子？答案

【问题标题】：How can I correctly select the first or the last child with CSS?如何使用 CSS 正确选择第一个或最后一个孩子？
【发布时间】：2022-01-25 03:47:20
【问题描述】：

我想用 CSS 选择第一个和最后一个孩子，但它不起作用。请看看我的小提琴并帮助我：

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}

<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

【问题讨论】：

【解决方案1】：

我建议您在代码中添加一个容器，因为它们是 body 的子代，但您不知道 body 的 last-child 或 first-child，因为您可能还有其他元素，例如 script标签或其他标签动态添加（就像在这里的sn-p或使用jsfiddle或任何其他在线编码工具）。

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}

<div>
  <div class="area">1</div>
  <div class="area">2</div>
  <div class="area">3</div>
  <div class="area">4</div>
</div>

这是运行 sn-p 时显示身体内部的屏幕截图：

您可能清楚地注意到，在末尾添加了一个div，它是body 的 last-child。添加容器将避免您处理随机设置和添加的隐藏元素。

【讨论】：

谢谢！但是我不明白为什么没有父 div 时浏览器不能知道最后一个孩子是什么。为什么 body 没有足够的父容器？
@user5857398 最后一个孩子考虑所有孩子.. body 作为容器就足够了，但它包含在您的代码之后添加的其他元素:) 检查开发工具，您会看到它们.. 因此最后一个孩子赢了t 是代码的最后一个 div，而是在末尾添加的元素
好收获！ @user5857398 您的 html/css 将在一个完整的独立网页上运行，它在 SO 代码 sn-p 或 fiddle 中不起作用，因为它们在 dom 中插入了一些不可见的标签。
@user5857398 last-child 不考虑类...它只考虑元素
...我也相信 OP 对 class vs child vs type 元素选择器感到困惑。

【解决方案2】：

如果你不想让所有的 div 在另一个结构中，你应该使用 first-of-type 和 last-of-type 而不是 first-child 和 last-child

.area {
  height: 100px;
  width: 100px;
}

.area:first-of-type {
  background-color: red;
}

.area:last-of-type {
  background-color: green;
}

<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

正如Temani Afif 所指出的，这个解决方案是任意的，可能并不适用于所有情况。如图所示，它不能在代码 sn-p 上正常工作，但它可以在 JSFiddle 上正常工作。 IE。 https://jsfiddle.net/vm1scerv/

【讨论】：

然后删除多余的 div :) 并查看您的代码将无法工作；)
是的，我意识到:(
last-child 和 last-type 都会在这里失败，或者可能会失败，因为你不知道最后添加到正文的内容......这就是为什么在这两种情况下我们都应该更好地使用容器:)
它似乎在 JSFiddle jsfiddle.net/vm1scerv@user5857398 中正常工作
@Drubio 它是任意的，所以我们不应该依赖它......这里的 sn-p 在最后添加了一个 div 而 jsfiddle 在这种情况下没有（但在其他情况下可能！） .所以最好避免这种情况，因为它在每种情况下和每种工具的行为都可能不同