CSS 選擇器的錯誤解釋

當嘗試設定第一個

的樣式時

內的元素使用類別名detail_container，您可能會遇到意想不到的結果。出現此問題的原因是對 :first-child 選擇器操作方式的誤解。

您實作的 CSS 正在嘗試選擇第一個

。也是Detail_container

的第一個子元素的元素。但是，如果此

中的第一個元素是是

時，:first-child 選擇器將不會符合

，即使它是第一個

。

正確的CSS 選擇器用法

選擇第一個

元素，無論其在detail_container

中的位置如何，都應該使用:first -of-type 選擇器。該選擇器將選擇第一個

。作為指定父元素的直接子元素的元素。

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

登入後複製

或者，為了提高瀏覽器相容性，您可以將一個類別指派給第一個

元素。並在 CSS 中定位該類別。

.detail_container h1.first {
  color: blue;
}

登入後複製

透過了解 CSS 選擇器的細微差別，您可以確保您的樣式規則準確地定位所需的元素。