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

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

.area{
高度：100px；
宽度：100px；
}
.地区：第一个孩子{
背景色：红色；
}
.地区：最后一个孩子{
背景颜色：绿色；
}

1
2.
3.
4

我建议您在代码中添加一个容器，因为它们是

body

的子对象，但您不知道

body

的

最后一个子对象或
第一个子对象，因为您可能会动态添加其他元素，如
script
标记或其他标记（就像这里的代码片段，或者使用JSFIDLE或任何其他在线编码工具）


.area{
高度：100px；
宽度：100px；
}
.地区：第一个孩子{
背景色：红色；
}
.地区：最后一个孩子{
背景颜色：绿色；
}

1.
2.
3.
4.
如果你不想让所有的div在另一个结构中，你应该使用
类型的第一个
和
类型的最后一个
，而不是
第一个孩子
和
最后一个孩子


.area{
高度：100px；
宽度：100px；
}
.面积：第一类{
背景色：红色；
}
.区域：类型的最后一个{
背景颜色：绿色；
}
1
2.
3.
4 可能的复制谢谢！但是我不明白为什么浏览器不知道什么是最后一个孩子当没有父母的DI.为什么身体是不够的父容器？@ USER585988最后一个孩子考虑所有的孩子..身体是足够的容器，但它包含在你的代码之后添加的其他元素：检查开发工具，您将看到它们。。因此，最后一个子元素不是代码的最后一个div，而是在endGood catch处添加的元素@USER 585988你的HTML/CSS将在一个完整的独立网页上工作，它在代码片段或小提琴中不起作用，因为他们将一些不可见的标签插入DOM。@ USER585988最后一个孩子不考虑类…它只考虑元素…另外，我认为OP混淆了类、子类和类型元素选择器ya我意识到：（最后一个孩子和最后一个类型在这里都会失败，或者可能会失败，因为你不知道最后添加到正文中的内容……这就是为什么在这两种情况下我们最好使用容器：）它似乎在JSFIDLE中正常工作@user5857398@Drubio这是武断的，所以我们不应该依赖它。。。这里的代码片段在末尾添加了一个div，而在本例中jsfiddle没有添加div（但在其他情况下可能会添加）。因此，最好避免这种情况，因为它在每种情况下和每种工具的行为可能不同