如何使用 CSS 選擇容器內類別的第一個元素？

用於選擇給定類別的第一個元素的CSS 選擇器

在Web 開發中，選擇網頁上的特定元素對於樣式和功能至關重要。一個常見的任務是在更廣泛的層次結構中選擇具有特定類別的元素的第一次出現。

考慮這樣一個場景，您需要在 id 或 class ' 的元素中選擇第一個具有類別 'A' 的元素。 B'。而「>」的組合和「first-child」選擇器在某些情況下可以工作，但當「A」元素的位置在「B」元素層次結構中變化時，它會失敗。

CSS3解決方案：:first-of-type

CSS3 透過:first-of-type 偽類提供了一個解決方案，它允許您選擇與其同級相關的指定類型的第一個元素。但是，CSS3 不包含 :first-of-class 偽類。

使用通用同級組合器 (~)

作為解決方法，您可以使用通用同級組合器 (~) ~) 結合 CSS 覆蓋來實現所需的結果。 ~ 選擇器符合左側選擇器選擇的元素的兄弟元素，但不是直接子元素。

考慮此規則：

.C > * > .A {
    /* Style every .A that's a grandchild of .C */
}

此規則選擇每個類別「A」的元素是類別「C」元素的孫元素。它假設“.C”是您想要設定樣式的所有“A”元素的共同祖先。

接下來，新增一條覆蓋規則：

.C > * > .A ~ .A {
    /* Style only the .A elements following the first .A child of each element that's a child of .C */
}

此規則使用~選擇器僅定位那些位於具有相同父元素的前一個「A」元素之後的「A」元素。它有效地覆蓋了第一條規則所應用的樣式。

範例：

考慮以下HTML 結構：

<div>

上述CSS 法則將套用下列樣式：

• 元素[1] 沒有元素[1] 沒有元素[1]類“A”，因此不受影響。
• 元素 [2] 是其各自父元素中的第一個「A」元素，將接收第一條規則中定義的樣式。
• 元素 [3] 不是第一個「A」元素，並將接收覆蓋規則中定義的樣式，該規則覆蓋第一條規則。

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