如何在 CSS 中定位父元素中類別的第一次出現？

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

在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 結構：

<div class="parentClass">
    <div class="someOtherClass">...</div>
    <div class="targetClass">First target</div>
    <div class="targetClass">Second target</div>
    <div class="targetClass">Third target</div>
</div>

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

瀏覽器相容性：

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

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