如何用 CSS 伪类有效地定位第一个和最后一个子节点？

如何在 CSS 中定位第一个和最后一个子元素

使用 CSS 选择第一个和最后一个子元素可能很棘手，因为“第一个和最后一个子元素-child”和“last-child”伪类适用于父元素的直接子元素。

在提供的 CSS 代码中，定位“.area”类的第一个和最后一个子元素不起作用，因为这些元素不是容器元素的直接子元素。要使选择起作用，您可以添加一个容器元素并将其子元素指定为目标。

以下是包含容器元素的示例：

.container {
  display: flex;
}

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

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

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

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

进行此修改，“.area”元素成为“.container”元素的直接子元素，并且“first-child”和“last-child”伪类可用于选择第一个和最后一个子元素相应地。

以上是如何用 CSS 伪类有效地定位第一个和最后一个子节点？的详细内容。更多信息请关注PHP中文网其他相关文章！