如何在 CSS 中选择容器内类元素的第一次出现？

用于选择给定容器中类元素首次出现的 CSS 选择器

基于类选择元素时，经常需要针对特定​​的出现，例如特定容器内的第一个实例。本文深入探讨了如何实现这样的精度。

理解挑战

考虑一个场景，您需要为 ID 为“B”的元素中的第一个类“A”元素设置样式。假设“B”不是另一个元素“B”的子元素，您最初可以尝试使用“>”的组合（子选择器）和“:first-child”（伪类）。然而，在第一个“A”元素的位置是动态的或不可预测的情况下，这种方法就不够了。

克服限制

CSS3 提供了“:first-of-type”伪- class，顾名思义，它在其兄弟元素中选择给定类型的第一个元素。不幸的是，没有内置的“:first-of-class”伪类来定位特定类的第一次出现。

为了规避此限制，我们可以使用通用兄弟组合器来解决此问题“～。”这允许我们根据元素与共享同一父元素的其他元素的关系来选择元素。通过使用“~”，我们可以定位容器中第一个“A”元素之后的所有元素。

实现解决方案

要实现此解决方案，我们将使用两个 CSS 规则：

1. 规则 1： 以作为“.C”元素（假定的父容器）的孙子的所有“.A”元素为目标。此规则将所需的样式应用于满足此条件的第一个“A”元素。
2. 规则 2： 定位规则 1 中选定的第一个元素之后的所有“.A”元素。该规则使用“~”选择目标“A”元素的所有兄弟元素，它们也是“.C”的孙子元素。对规则 1 应用的样式所需的任何调整都可以在此处覆盖。

浏览器兼容性

需要注意的是 ~ 选择器是 CSS3 的一部分，它被大多数主要浏览器，包括 IE7 及更高版本。

可视化样式应用程序

为了说明规则如何应用，让我们考虑以下 HTML 结构：

<div class="C">
    <div class="B">
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [2] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
    <div class="D">
        <div class="A">Content</div> <!-- [2] -->
        <div class="E">Content</div> <!-- [1] -->
        <div class="F">Content</div> <!-- [1] -->
        <div class="A">Content</div> <!-- [3] -->
    </div>
</div>

规则 1： 将样式应用于元素 [2]，因为它们是各自“.B”容器内的第一个“A”元素。

规则 2： 将适用元素 [3] 的样式，因为它们是遵循先前选择的元素 ([2]) 的“A”元素。

以上是如何在 CSS 中选择容器内类元素的第一次出现？的详细内容。更多信息请关注PHP中文网其他相关文章！