首頁 >web前端 >css教學 >如何在複雜的 HTML 結構中選擇具有特定類別的第一個元素?

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

Barbara Streisand
Barbara Streisand原創
2024-11-13 10:44:02240瀏覽

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

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

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn