如何在 CSS 中選擇容器內類別元素的第一次出現？

用於選擇給定容器中類元素首次出現的CSS 選擇器

基於類別選擇元素時，經常需要針對特定的出現，例如特定容器內的第一個實例。本文深入探討如何實現這樣的精確度。

理解挑戰

考慮一個場景，您需要為 ID 為「B」的元素中的第一個類別「A」元素設定樣式。假設「B」不是另一個元素「B」的子元素，您最初可以嘗試使用「>」的組合（子選擇器）和「:first-child」（偽類）。然而，在第一個「A」元素的位置是動態的或不可預測的情況下，這種方法就不夠了。

克服限制

CSS3 提供了「:first-of-type」偽- class，顧名思義，它在其兄弟元素中選擇給定類型的第一個元素。不幸的是，沒有內建的「:first-of-class」偽類別來定位特定類別的第一次出現。

為了規避此限制，我們可以使用通用兄弟組合器來解決此問題「～。」這允許我們根據元素與共享同一父元素的其他元素的關係來選擇元素。透過使用“~”，我們可以定位容器中第一個“A”元素之後的所有元素。

實現解決方案

要實現此解決方案，我們將使用兩個CSS 規則：

1. 規則1： 以作為“ .C」元素（假定的父容器）的孫子的所有「.A」元素為目標。此規則將所需的樣式套用至符合此條件的第一個「A」元素。
2. 規則 2： 定位規則 1 中選定的第一個元素之後的所有「.A」元素。該規則使用“~”選擇目標“A”元素的所有兄弟元素，它們也是“.C”的孫子元素。對規則 1 套用的樣式所需的任何調整都可以在此處覆蓋。

瀏覽器相容性

需要注意的是 ~ 選擇器是 CSS3 的一部分，它被大多數主要瀏覽器，包括 IE7 及更高版本。

視覺化樣式應用程式

為了說明規則如何應用，讓我們考慮以下HTML 結構：

規則1： 將樣式應用於元素[2]，因為它們是各自“.B”容器內的第一個“A”元素。

規則 2： 將適用元素 [3] 的樣式，因為它們是遵循先前選擇的元素 ([2]) 的「A」元素。

以上是如何在 CSS 中選擇容器內類別元素的第一次出現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！