如何用 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中文網其他相關文章！