CSS3 `:first-of-type` 選擇器如何使用類別名稱？

使用CSS3 選擇器:first-of-type 和類別名稱

CSS3 選擇器:first-of 是常見的誤解- type 可以與類別名稱結合使用來選擇具有該特定類別的第一個元素。然而，事實並非如此。

:first-of-type 偽類的目標是同級中該類型的第一個元素。因此，使用帶有 :first-of-type 的類別選擇器會選擇該類別的第一個元素，該元素也是其類型的第一個元素。

說明：

p:first-of-type { color: blue; }

這條規則會將其父元素的第一段變成藍色。

p.myclass1:first-of-type { color: red; }

此規則會將類別為「myclass1」的第一段變成藍色紅色。

但是，如果有多個帶有「myclass1」類別的段落，則只有第一個段落會受到此規則的影響，因為它的目標是其類型的第一個段落也具有指定的類。

要選擇某個類別的第一次出現，無論其類型如何，都沒有直接的 CSS3 選擇器可用。相反，可以採用涉及多個選擇器和級聯的解決方法：

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default color */; }

此解決方案透過為具有「myclass1」類別的元素設定初始顏色來運作。然後，後續規則將覆蓋與第一個元素同級的任何其他元素的顏色。

本質上，請記住 :first-of-type 的目標是其類型的第一個元素，而不是在 CSS3 選擇器中使用給定類別的第一個元素至關重要。

以上是CSS3 `:first-of-type` 選擇器如何使用類別名稱？的詳細內容。更多資訊請關注PHP中文網其他相關文章！