:first-of-type 伪类选择器用于选中父元素下同类型标签的第一个元素，如 p:first-of-type 可选中首个
标签；它可与标签、类、ID、后代或子元素选择器组合使用，实现精准样式控制。例如 .highlight-box p:first-of-type { font-size: 1.2em; font-weight: bold; } 可为特定容器内第一段文本设置样式。与 :first-child 不同，:first-of-type 不要求目标元素是父元素的第一个子节点，只要求其在同类标签中排第一，因此在结构复杂时更具灵活性。结合上下文选择器如 .sidebar ul li:first-of-type 可精确设置侧边栏列表首项背景色，避免额外 class 或 JavaScript 干预，提升样式语义化与维护性。
在CSS中，:first-of-type 是一个非常实用的伪类选择器，它能选中父元素下同类型标签中的第一个元素。结合普通CSS选择器使用，可以更精确地定位目标元素。
基本语法与作用
:first-of-type 会根据元素的类型（即标签名）来查找其在父容器中同类标签的第一个实例。比如 p:first-of-type 会选择父元素中第一个
标签。
它可以和以下选择器组合使用：
标签选择器：如 p:first-of-type 类选择器：如 .highlight p:first-of-type 后代或子元素选择器：如 div > p:first-of-type ID选择器结合：如 #content p:first-of-type
常见使用场景
当你希望只对某类元素中的“第一个”进行样式处理时，这个组合特别有用。
立即学习“前端免费学习笔记（深入）”；
例如，为文章中第一段添加缩进或加大字号：
.highlight-box p:first-of-type {
font-size: 1.2em;
font-weight: bold;
}
这段代码会让 class=”highlight-box” 容器内的第一个
标签加粗并放大字体。
与其他选择器的区别
注意 :first-of-type 和 :first-child 不一样。前者只看标签类型是否为同类中的第一个，后者要求该元素必须是父元素下的第一个子节点。
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情
举个例子：
标题
这是第一段
这是第二段
此时 p:first-of-type 依然能选中第一个
，尽管它不是 div 的第一个子元素。而 p:first-child 就无法匹配，因为
并非第一个孩子。
嵌套结构中的应用
在复杂结构中，配合上下文选择器可实现更精准控制。
比如只想让某个特定类下的列表中第一个
.sidebar ul li:first-of-type {
background-color: #f0f0f0;
}
这只会给 .sidebar 中每个 ul 的第一个 li 添加背景色，不影响其他位置的列表项。
基本上就这些。掌握 :first-of-type 与常规选择器的搭配，能让样式规则更灵活、更语义化，避免额外添加 class 或 JS 控制。关键是理解“同类型”的判断逻辑，就能准确命中目标元素。
以上就是css选择器与first-of-type结合使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/989771.html
微信扫一扫 
支付宝扫一扫 
