CSS:first-of-type选择器详解与使用技巧

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《CSS中:first-of-type选择器的作用是选取某个父元素中第一个特定类型的子元素。它会匹配该父元素下第一个与指定元素类型相同的子元素，无论该子元素是否为第一个子元素。这个选择器常用于样式设计中，以精确地定位和美化页面中的特定元素。》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

:first-of-type 选择同类型子元素中的首个元素，如 p:first-of-type 匹配首个 p 标签，不一定是父元素的第一个子节点，与 :first-child 不同，后者要求必须是第一个子元素。

:first-of-type 是 CSS 中的一个结构伪类选择器，它的作用是选中父元素下同类型元素中的第一个子元素。

基本作用说明

例如，如果有多个 p 标签、div 标签混排，:first-of-type 会选择每个类型中第一个出现的那一个。

使用示例

<article>
  <h2>标题</h2>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <img src="1.jpg" alt="">
  <img src="2.jpg" alt="">
  <p>第三段文字</p>
</article>

p:first-of-type {
  color: red;
}
img:first-of-type {
  border: 3px solid blue;
}

• 第一个 p 元素（“第一段文字”）会被设为红色，因为它是所有 p 标签中的第一个。
• 第一个 img 元素会有一个蓝色边框。

与 :first-child 的区别

• 如果第一个子元素不是目标类型，:first-child 不会匹配，但 :first-of-type 仍可命中该类型第一个出现的元素。
• 比如上面例子中，p 不是第一个子元素（h2 才是），所以 p:first-child 不会生效，但 p:first-of-type 可以。

理论要掌握，实操不能落！以上关于《CSS:first-of-type选择器详解与使用技巧》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！