如何在複雜的 HTML 結構中選擇具有特定類別的第一個元素？

如何選擇給定類別的第一個元素

使用 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”元素。

1. 第一條規則為所有孫子「.A」元素設定樣式'.C'。這包括元素“[2]”和“[3]”。
2. 第二條規則針對同一父級下另一個「.A」元素後面的任何「.A」元素。這包括元素“[3]”，但不包括“[2]”，因為它沒有類為“.A”的前同級元素。

因此，元素「[2]」（第一個'.A') 保留預設樣式，而元素 '[3]' 的樣式被第二條規則覆蓋。因此，我們成功地在元素“.C”的上下文中定位並設計了類別“.A”的第一次出現。

以上是如何在複雜的 HTML 結構中選擇具有特定類別的第一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！