CSS 的 `:first-child` 和 `:first-of-type` 選擇器有什麼不同？

:first-child 和:first-of-type 之間的微妙區別

理解:first-child 和:first 之間的細微差別-of-type 在CSS 樣式中至關重要。儘管它們的選擇器聽起來相似，但這兩個會產生不同的結果。

父子關係：仔細看看

父元素中的每個元素都可以有多個子元素。在這些孩子中，只有一個可以稱得上是第一個孩子。這個獨特的特徵被:first-child:

<div class="parent">
  <div>Child</div> <!-- :first-child -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

:first-of-type

的力量所捕獲，其中:first-child 專注於識別第一個子元素:first-of-type有一個更具體的用途：它針對特定類型的第一個元素，無論其作為子元素的位置如何。考慮一個場景，其中所涉及的類型是div：

<div class="parent">
  <div>Child</div> <!-- div:first-child, div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

在此範例中，:first-child 和:first-of-type 都標識相同的元素，因為它既是第一個子元素又是第一個元素分區但是，如果我們引入h1 元素作為第一個子元素：

<div class="parent">
  <h1>Child</h1> <!-- h1:first-child, h1:first-of-type -->
  <div>Child</div> <!-- div:nth-child(2), div:first-of-type -->
  <div>Child</div>
  <div>Child</div>
</div>

h1，由於其第一個子元素狀態，滿足:first-child 要求。但是，它不再是第一個 div。因此，第一個 div 成為 div 的 :first-of-type 匹配。

關鍵要點

:first-child 精確定位第一個子元素，而:first- of-type 定位特定類型的第一個元素，無論其作為子元素的位置如何。當根據出生順序和固有類型來定位特定元素時，這種差異至關重要。

以上是CSS 的 `:first-child` 和 `:first-of-type` 選擇器有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！