:first-of-type 选择器用于选中父元素内同类型中的首个元素，如 p:first-of-type 为首个段落设置缩进、字体大小和颜色；h2:first-of-type 美化首个标题；li:first-of-type 突出列表首项；即使非父元素首个子元素，只要其在同类标签中排第一即生效，适用于无需额外 class 的首项样式定制。
使用 :first-of-type 选择器可以精准地为某一类型元素中的第一个子元素设置样式，常用于调整首行或首个同类元素的外观。这个伪类会匹配父元素下同类型元素中的第一个。
基本语法与作用
:first-of-type 会选择父元素中其类型的第一个实例。比如，如果页面中有多个
段落，它会选中第一个
元素。
示例：让文章中第一个段落缩进并加大字体
p:first-of-type { text-indent: 2em; font-size: 1.1em; color: #333; }
这样只会对第一个
生效，后面的段落不受影响。
立即学习“前端免费学习笔记（深入）”；
应用于首行标题或列表
如果你希望文章的第一个标题（如
）有特殊样式，也可以用此选择器：
九歌
九歌–人工智能诗歌写作系统
322 查看详情 h2:first-of-type { margin-top: 0; font-size: 1.8em; border-bottom: 1px solid #ccc; }
在包含多个
的内容区域中，只有第一个会被应用该样式，适合用于文章导语后的首个章节标题美化。
对于列表，比如想突出第一个列表项：
li:first-of-type { font-weight: bold; color: #005a9c; }
注意事项与常见问题
这个选择器依赖于元素类型和在父容器中的位置。以下几点要注意：
如果第一个子元素不是目标类型，:first-of-type 仍会选中该类型中排第一的元素，哪怕它不是整体第一个子元素 确保没有其他同类型元素意外出现在前面（比如隐藏的元素或脚本生成的内容） 它不区分类名或属性，只看标签类型
例如，下面这段结构中：
这是第一个段落
这是第二个段落
此时 p:first-of-type 依然能选中第一个
，尽管它不是
基本上就这些。合理使用 :first-of-type 能让你的首行或首项样式更灵活，又无需额外添加 class。
以上就是如何用css:first-of-type实现首行样式调整的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030667.html
微信扫一扫
支付宝扫一扫
