如何使用 CSS 正確設定第一個和最後一個子元素的樣式？

使用 CSS 選擇第一個和最後一個子元素

選擇網頁上的特定子元素可以使用 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>

在這種情況下，CSS 不會將所需的樣式套用於第一個和最後一個子元素，因為它們不是具有區域類別的父元素的直接子元素。要修正此問題，您需要將子元素包裝在另一個父元素中：

.container {
  . . .
}

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

.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>

此修改可確保CSS 規則應用於容器元素內的第一個和最後一個子元素。透過將元素包裝在父容器中，您可以為目標子元素定義特定的上下文，從而允許您根據它們在該容器中的位置準確地設定它們的樣式。

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