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

Question

我想用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/

Answer 1

我建议您在代码中添加一个容器，因为它们是body的孩子，并且您不知道last-child或first-child body是什么因为你可能有其他元素，如script标签或动态添加的其他标签（如此处的片段或jsfiddle或任何其他在线编码工具）。

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

正如您可能清楚注意到的那样，最后添加了div，last-child的 <{strong> body。添加容器将避免您处理随机设置和添加的隐藏元素。

Answer 2

如果您不想让其他结构中的所有div使用first-of-type和last-of-type而不是first-child和last-child

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如Temani Afif指出的那样，这种解决方案是任意的，可能无法在所有情况下起作用。如图所示，它没有正确处理代码片段，但它在JSFiddle上也是如此。 I.E. https://jsfiddle.net/vm1scerv/