我可以將 CSS3 的 `:first-of-type` 選擇器與類別名稱一起使用嗎？

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

人們可能想知道是否可以使用CSS3 選擇器:first - of-type 與類別名稱結合使用。但是，僅使用此選擇器可能不夠。

說明

:first-of-type 偽類的目標是其內特定類型的第一個元素兄弟姊妹。當與類別選擇器結合使用時，它會過濾出既擁有指定類別又是同級元素中該類型的第一個元素的元素。

不幸的是，CSS 沒有 :first-of-class 選擇器只尋找具有特定類別的元素的第一次出現。

解決方法

解決此問題限制，可以採用以下技術：

.myclass1 {
  color: red;
}

.myclass1 ~ .myclass1 {
  color: /* default or inherited from parent div */;
}

解釋

解釋

此解決方法使用通用同級組合器(~) 來定位具有類別myclass1的所有元素前面有另一個具有相同類別的元素。透過將這些後續元素的顏色設為預設顏色或從父 div 繼承，我們可以有效地抑制第一次出現的 .myclass1 之外的所有元素的紅色。

其他資源

有關此解決方法的更詳細說明和可視化插圖可以在此處找到：

[Mozilla開發人員網路](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#Adjacent_sibling_selectors)[CSS 技巧](https://css-tricks.com/ almanac/ Selectors/c/combinators/#:~:text=~ 組合器選擇全部，= 30（類具有特異性））

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