如何在复杂的 HTML 结构中选择具有特定类的第一个元素？-css教程-PHP中文网

如何在复杂的 HTML 结构中选择具有特定类的第一个元素？

Barbara Streisand

发布： 2024-11-13 10:44:02

原创

253 人浏览过

How to Select the First Element with a Specific Class Within a Complex HTML Structure?

如何选择给定类的第一个元素

使用 HTML 元素时，选择特定元素进行样式或操作至关重要。一种场景涉及定位某个类在另一个元素中的第一次出现，当所需类的位置在不同元素中变化时，就会带来挑战。

在这种情况下，我们的目标是选择具有类 ' 的第一个元素由 id 或类“B”标识的元素内的 A'。当“B”的名称和结构可能不同，并且“A”元素在“B”中的位置不一致时，就会出现问题。然而，仍然存在一个一致的因素：外部元素“C”的存在。

解决方案：利用同级选择器

CSS3 引入了 :first-of-type 伪类，它选择兄弟姐妹中该类型的第一个元素。不幸的是，CSS 缺少 :first-of-class 伪类。因此，我们需要一种替代解决方法。

一种方法涉及利用通用同级组合器 (~) 以及重写样式来实现我们的目标。该技术利用了 CSS 以自上而下的方式应用样式的事实。通过定义两个规则，我们可以覆盖与我们所需条件不匹配的“.A”元素的默认样式：

.C > * > .A {
  /* Styles for all '.A' elements that are grandchildren of '.C' */
}

.C > * > .A ~ .A {
  /* Styles for '.A' elements that follow the first '.A' child of any element that is a child of '.C' */
}

登录后复制

在这些规则中，第一个目标是“.A”的所有“.A”孙子元素。 C'。由于这包括我们想要的第一次出现，因此我们需要使用第二条规则“撤消”后续“.A”元素的此样式。这是通过使用 ~ 组合器仅选择同一父元素下紧随另一个“.A”元素的“.A”元素来完成的。

如何应用样式

来说明如何这样做技术有效，请考虑以下 HTML 结构：

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

登录后复制

这里，'[1]' 表示不符合我们标准的元素，而 '[2]' 和 '[3]' 表示第一个和我们想要以不同方式设置任何后续“.A”元素。