為什麼 `:first-child` 無法選擇嵌套元素中的第一個 ``，如何修復？

:first-child 在某些情況下無法匹配預期元素

嘗試使用該類別選擇div 中的第一個h1 元素時“detail_container”，:first-child 選擇器可能無法如預期運作。當h1 不是div 的直接子級時，就會發生這種情況，如下例所示：

<style type="text/css">
.detail_container h1:first-child {
  color: blue;
} 
</style>

<div class="detail_container">
  <ul>
    <li>
    <li>
  </ul>
  <h1 id="First-H">First H1</h1>
  <h1 id="Second-H">Second H1</h1>
</div>

在這種情況下，:first-child 選擇器無法選擇第一個h1，因為ul 元素是div 的第一個子元素，而不是h1。

如何解決問題

要選擇第一個h1 元素，無論其在div 中的位置如何，可以使用替代CSS 選擇器：

1。 :first-of-type

:first-of-type 選擇器選擇其父級的第一個與給定元素類型相符的子級。在本例中，它將選取 div 的第一個 h1 子級，如下所示：

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

2。基於類別的選擇

另一種方法是為第一個h1 指定一個唯一的類，例如“first”，然後在CSS 中定位該類：

.detail_container h1.first {
  color: blue;
}

This方法提供了更大的靈活性和對選擇的控制。

以上是為什麼 `:first-child` 無法選擇嵌套元素中的第一個 ``，如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！