:first-child 與 :first-of-type：我什麼時候應該使用每個 CSS 偽類？

使用:first-child 與:first-of-type 進行元素選擇

在CSS 中，偽類:first-child和:first-of-type 都會根據元素在父元素中的位置來選擇元素。但是，它們在定義“first”的方式上有所不同。

Element:first-child

:first-child 選擇其指定父元素的第一個子元素，無論其元素類型。在提供的範例中：

div:first-child

此選擇器將匹配所有

作為其父元素的第一個子元素的元素。如果父元素包含任何其他元素類型，則不會選擇它們。

Element:first-of-type

:first-of-type 選擇第一個其父級中特定元素類型的實例。它將匹配第一個

。元素，即使它不是整體的第一個子元素。例如：

div:first-of-type

在提供的HTML 中：

<div class="parent">
  <div>Child</div>
  <h1>

:first-of-type 會選擇

;將類別「parent」作為

的第一個實例元素，而

id 為「first」的將是

的第一個實例。元素。

主要區別

• 元素層次結構: :first-child 根據子順序匹配，而:first-of-類型根據元素類型和該類型中的位置進行比對。
• 數量符合: :first-child 只能符合每個父元素的一個元素，而 :first-of-type 可以符合相同類型的多個元素。
• 特異性: :first- of-type 通常比:first-child 具有更高的特異性，這意味著它將在CSS 中優先

用法範例

使用:first-child選擇：

• 第一個無序列表中的清單項目：ul li:first-child
• 清單中第一篇部落格文章的標題：文章.blog -post:first-child h2

使用:first-of-輸入選擇：

• 第一個標題(

  ,

  等）在文件中： body :first-of-type

• 表單中的第一個按鈕：form button:first-of-type

以上是:first-child 與 :first-of-type：我什麼時候應該使用每個 CSS 偽類？的詳細內容。更多資訊請關注PHP中文網其他相關文章！