選擇父級中某個類別的第一次出現

在CSS 中，當您需要定位某個類別的第一當元素時，就會出現挑戰父元素中的特定類，尤其是當該類可能出現在其同級元素中的不同位置時。當父元素的類別或子結構可能不同時，這個問題變得更加複雜。

:first-of-type Pseudo-Class

CSS3 提供了:first -of-type 偽類，讓您選擇其同級中特定類型的第一個元素。但是，沒有等效的 :first-of-class 偽類專門用於選擇給定類別的第一個元素。

使用 ~ 和通用同級選擇器的解決方法

一種解決方法是使用通用同級組合器 (~) 以及覆蓋規則。透過了解套用於具有相同類別的其他元素的預設樣式，您可以建立更具體的規則，僅覆寫第一次出現目標類別的元素的預設樣式。

範例:

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

範例：

考慮以下 HTML 架構：

    
...
    
First target
    
Second target
    
Third target

在這種情況下，第一條規則會將樣式套用於「parentClass」元素內具有類別「targetClass」的所有元素。第二條規則將覆蓋第一條規則之後的所有「targetClass」元素的樣式，恢復第一條規則所套用的任何自訂樣式。

瀏覽器相容性：

一般同級組合符號 (~) 被 IE7 及更高版本識別。因此，此解決方法與除 IE6 之外的所有主要瀏覽器相容。