如何使用 CSS 正確選擇第一個和最後一個子元素？

使用CSS 選擇第一個和最後一個子元素：了解上下文

在CSS 中選擇第一個或最後一個子元素需要清楚了解應用CSS 的上下文。如給定的 HTML 和 CSS 片段所示，將 :first-child 和 :last-child 偽類直接應用於 .area 元素可能不會產生所需的結果。這是因為這些偽類別僅選擇指定父元素的第一個和最後一個子元素。

在給定的範例中，.area 元素不是 HTML 結構中指定父元素的子元素。它們是 body 元素的直接子元素，可能包含其他元素，例如腳本標籤或動態新增的內容。

要正確選擇 .area 元素的第一個和最後一個子元素，必須引入容器元素。透過將 .area 元素包裝在另一個元素（例如具有自己的類別的 div）中，偽類別可以準確地定位該容器內的第一個和最後一個子元素。

這是一個修改後的HTML 結構，示範了正確的用法：

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

使用這種結構，以下CSS將正確選擇第一個和最後一個.area子元素：

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

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

透過將容器元素指定為父選擇器，CSS 現在可以準確定位該上下文中.area元素的第一個和最後一個子元素。

以上是如何使用 CSS 正確選擇第一個和最後一個子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！