如何選擇特定類別元素在不同結構中的第一次出現？

選擇特定類元素的第一次出現

當結構和元素存在時，選擇特定類元素的第一次出現可能會很困難父元素內的計數有所不同。在這種情況下，當嘗試在 id 或類別“B”的元素中選擇第一個類別“A”的元素時，就會出現問題。

使用 CSS3 克服挑戰

CSS3 提供了 :first-of-type 偽類，它針對其同級中特定類型的第一個元素。但是，沒有等效的 :first-of-class 偽類。

解決方法

作為解決方法，可以使用通用兄弟組合器(~ ）並應用覆蓋規則來「撤消」應用於.C 中所有.A 元素的原始樣式

CSS 碼

以下CSS 程式碼提供了解決方案：

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

.C > * > .A ~ .A {
    /* Override styles only for .A elements following the first .A child */
}

此程式碼將樣式應用於所有.A 元素是.C. 的孫輩此外，它會覆蓋.C 下面每個元素的第一個.A子元素之後的後續.A 元素的樣式。

示例插圖

考慮以下HTML 結構:

<div class="C">
    <div class="B">
        <div class="A">Content</div>
        <div class="A">Content</div>
    </div>
</div>

在此場景：

• 第一個.A 元素將接收第一條規則所應用的樣式。
• 第一個 .A 元素之後的第二個 .A 元素將接收由第一條規則所應用的覆蓋樣式。第二條規則。

瀏覽器相容性

〜選擇器被IE7及以上版本識別，這意味著該解決方案得到了廣泛支援。它在 IE6 上失敗的唯一主要瀏覽器是 IE6。

透過實作此解決方法，開發人員可以選擇性地定位特定類別元素的第一次出現並對其進行樣式設置，即使父元素中的結構和元素計數發生變化也是如此。

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