使用 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”元素。
因此,元素「[2]」(第一個'.A') 保留預設樣式,而元素 '[3]' 的樣式被第二條規則覆蓋。因此,我們成功地在元素“.C”的上下文中定位並設計了類別“.A”的第一次出現。
以上是如何在複雜的 HTML 結構中選擇具有特定類別的第一個元素?的詳細內容。更多資訊請關注PHP中文網其他相關文章!