如何在CSS中使用:first-of-type选择器_选中同类型首个元素设置样式

:first-of-type用于选中父元素下某标签类型的第一个子元素，如p:first-of-type设置首个p标签样式；与:first-child不同，它只关注同类型标签中的第一个，不受兄弟元素位置影响，适用于无需class即可样式化首项的场景。

在CSS中，:first-of-type 是一个非常实用的伪类选择器，它用于选中父元素下某一类型中的第一个子元素，并为其设置样式。这个“类型”指的是标签名称，比如 p、div、li 等。

基本语法

:first-of-type 的写法是在标签名后加上该伪类：

p:first-of-type {
  color: red;
}

上面的规则表示：选中父容器中第一个 p 标签，并将其文字颜色设为红色。

实际应用场景

假设你有一段HTML内容如下：

立即学习“前端免费学习笔记（深入）”；

  

标题1

  

这是第一段

  

这是第二段

  

    
• 列表项1

    
• 列表项2

  

  

标题2

  

第三段

你想只给每个类型中的第一个元素加样式，可以这样写：

QoQo

QoQo是一款专注于UX设计的AI工具，可以帮助UX设计师生成用户角色卡片、用户旅程图、用户访谈问卷等。

172 查看详情 p:first-of-type {
  font-weight: bold;
}

li:first-of-type {
  background-color: yellow;
}

h2:first-of-type {
  border-bottom: 2px solid #000;
}

结果是：

• 只有“这是第一段”会加粗（因为它是第一个 p）
• “列表项1”背景变黄（第一个 li）
• 只有第一个 h2 有下边框

与其他选择器的区别

:first-of-type 和 :first-child 不一样。前者关注的是“同类型标签的第一个”，后者要求该元素必须是父元素下的第一个子节点。

例如：

  

段落

  文本
  

第二个段落

在这个例子中：

• p:first-of-type 能匹配第一个 p
• p:first-child 同样能匹配（因为它是第一个子元素）
• 但如果把 span 放在前面，则 p:first-child 就不会生效，但 p:first-of-type 依然有效

注意事项

使用 :first-of-type 时需注意：

• 它只看标签类型，不区分 class 或 id
• 如果某个类型的标签在父元素中只有一个，那么它既是第一个也是最后一个
• 它不能选中不存在的元素，若没有对应标签则不生效

基本上就这些。合理使用 :first-of-type 可以让你在不添加额外 class 的情况下，精准控制页面中同类元素的首个实例样式。不复杂但容易忽略。

以上就是如何在CSS中使用:first-of-type选择器_选中同类型首个元素设置样式的详细内容，更多请关注其它相关文章！