:first-of-type 选择父元素中同类型的首个子元素，如 p:first-of-type 选中第一个 p 标签，不受其他类型元素影响，常用于段落、列表等首项样式设置。
在CSS中，:first-of-type 伪类用于选择其父元素中具有相同标签类型的第一个子元素。它会忽略其他类型的兄弟元素，只关注指定的元素类型。
基本语法与作用
使用 :first-of-type 可以选中某一类型（如 p、div、li 等）在父容器中的第一个实例。它不依赖于该元素在所有子元素中的位置，只要它是该类型中出现的第一个即可。
例如：
p:first-of-type { color: red;}
这段代码会让父元素中第一个 p 标签文字变为红色，即使前面有其他元素（如 div 或 h2），也不影响选择逻辑。
实际应用场景
这个选择器常用于对特定类型元素进行初始化样式设置，比如段落、列表项或标题。
立即学习“前端免费学习笔记（深入）”；
选择第一个段落并加粗：p:first-of-type { font-weight: bold; } 为第一个列表项添加背景：li:first-of-type { background: #f0f0f0; } 仅对第一个图片设置边距：img:first-of-type { margin-top: 0; }
与其他选择器的区别
:first-of-type 和 :first-child 不同。前者只看元素类型，后者要求该元素必须是父元素下的第一个子节点。
九歌
九歌–人工智能诗歌写作系统
322 查看详情 
示例说明：
标题
第一段
第二段
此时 p:first-of-type 能选中“第一段”，因为它是第一个 p 元素；但 p:first-child 无法匹配任何元素，因为 p 不是第一个子节点。
结合类或属性更精确控制
可以将 :first-of-type 与其他选择器组合，实现更精准的选择。
比如：
.content p:first-of-type { text-indent: 2em;}
这表示只对 class 为 content 的容器内的第一个 p 元素设置首行缩进。
基本上就这些。掌握 :first-of-type 能帮助你在不添加额外类名的情况下，准确选中所需元素。关键是理解“类型”指的是标签类型，并且选择的是该类型中的首个实例。
以上就是在css中如何用:first-of-type选择特定类型第一个元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1033198.html
微信扫一扫 
支付宝扫一扫 
