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