如何在 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中文网其他相关文章！