:first-of-type 选择器用于选中父元素内同类型中的首个元素，如 p:first-of-type 为首个段落设置缩进、字体大小和颜色；h2:first-of-type 美化首个标题；li:first-of-type 突出列表首项；即使非父元素首个子元素，只要其在同类标签中排第一即生效，适用于无需额外 class 的首项样式定制。
使用 :first-of-type 选择器可以精准地为某一类型元素中的第一个子元素设置样式，常用于调整首行或首个同类元素的外观。这个伪类会匹配父元素下同类型元素中的第一个。
:first-of-type 会选择父元素中其类型的第一个实例。比如，如果页面中有多个 <p> 段落，它会选中第一个 <p> 元素。
示例：让文章中第一个段落缩进并加大字体
p:first-of-type { text-indent: 2em; font-size: 1.1em; color: #333; }这样只会对第一个 <p> 生效，后面的段落不受影响。
立即学习“前端免费学习笔记（深入）”；
如果你希望文章的第一个标题（如 <h2>）有特殊样式，也可以用此选择器：
h2:first-of-type { margin-top: 0; font-size: 1.8em; border-bottom: 1px solid #ccc; }在包含多个 <h2> 的内容区域中，只有第一个会被应用该样式，适合用于文章导语后的首个章节标题美化。
对于列表，比如想突出第一个列表项：
li:first-of-type { font-weight: bold; color: #005a9c; }这个选择器依赖于元素类型和在父容器中的位置。以下几点要注意：
例如，下面这段结构中：
<div> <span>辅助说明</span> <p>这是第一个段落</p> <p>这是第二个段落</p> </div>此时 p:first-of-type 依然能选中第一个 <p>，尽管它不是 <div> 的第一个子元素。
基本上就这些。合理使用 :first-of-type 能让你的首行或首项样式更灵活，又无需额外添加 class。以上就是如何用css:first-of-type实现首行样式调整的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
752
收藏
