如何正确选择CSS的第一个或最后一个子项？

我希望使用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>

https://jsfiddle.net/rbw8dpsb/1/

---

解决方案

我建议您添加一个容器，因为在您的代码中它们是body的子级，但您不知道last-child或first-child的first-child，因为您可能有其他元素，如script标签或其他动态添加的标签(如此处的代码片段或使用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>

这是一个屏幕截图，显示您运行代码段时身体内的内容：

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