选择父级中某个类的第一次出现

在 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 之外的所有主要浏览器兼容。