首页 >web前端 >css教程 >我可以使用 :first-of-type 选择器来选择具有特定类的第一个元素吗?

我可以使用 :first-of-type 选择器来选择具有特定类的第一个元素吗?

Barbara Streisand
Barbara Streisand原创
2024-12-29 17:11:10281浏览

Can I Use the :first-of-type Selector to Select the First Element with a Specific Class?

:first-of-type 选择器和类选择

CSS3 中的 :first-of-type 选择器旨在选择第一个其兄弟元素中特定类型(例如,p、div 等)的元素。然而,当尝试将其与类名结合使用时,会出现一个常见的误解。

问题:

是否可以使用 :first-of-type选择器选择具有特定类的第一个元素名称?

答案:

不幸的是,使用单个选择器无法实现此目的。 :first-of-type 伪类对元素类型进行操作,而不是对类名进行操作。使用类选择器意味着选择具有指定类的元素,并且也是其同级组中第一个类型的元素。

解决方法:

因为有no :CSS 提供的first-of-class 选择器,可以使用一种解决方法来定位第一次出现的class:

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

这里,第一个类声明将所有具有“myclass1”类的元素的颜色设置为红色。后续声明的目标是具有“myclass1”类的任何元素,该元素紧随其后是具有相同类的另一个元素。后一个声明将除第一次出现该类之外的所有颜色重置为其默认值或继承值。

此解决方法的详细说明和插图可以在下面找到文章:

  • https://css-tricks.com/the-problem-with-first-child-selector/
  • https://www.quirksmode.org/css /contents.html#first-of-type-sibling

以上是我可以使用 :first-of-type 选择器来选择具有特定类的第一个元素吗?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn