為什麼 `:first-child` 不選我的 H1？

為什麼:first-child 沒有選擇預期的H1

在所呈現的場景中，目標是為第一個h1 元素著色在類別detail_container blue 的div 中。使用的 CSS (:first-child) 假定目標元素是其父元素的第一個子元素，但在這種情況下，父元素的第一個子元素是 ul 元素。

理解 :first-child

:first-child 選擇器選擇指定父元素中符合指定條件的第一個子元素。在提供的程式碼中，條件是“h1”，但由於 div 的第一個子等級是 ul，所以 :first-child 選擇器不適用於 h1 元素。

使用的替代解決方案:first-of-type

CSS3 引入了:first-of-type 選擇器，它選擇元素類型在其父元素中第一次出現的位置。在這種情況下，將:first-child 替換為:first-of-type 可以解決問題：

.detail_container h1:first-of-type {
  color: blue;
}

瀏覽器相容性注意事項

但是，:first-與:first-child 相比，of-type 的瀏覽器相容性有限。

建議的解決方案使用類別

更實用且跨瀏覽器相容的解決方案是為目標h1 元素分配一個類別並相應地設定其樣式：

.detail_container h1.first {
  color: blue;
}

以上是為什麼 `:first-child` 不選我的 H1？的詳細內容。更多資訊請關注PHP中文網其他相關文章！