我可以将 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中文网其他相关文章！