first-of-type 选的是父元素中该标签类型第一个出现的元素，而非父元素第一个子元素；它忽略注释、文本节点和其他标签，只按标签名在同类中找首个，故 p:first-of-type 在 <h2><p>首段</p> 中仍生效，但在嵌套结构中需注意作用域。
first-of-type 不是“选父元素的第一个子元素”，而是“选父元素中该类型出现的第一个”。搞错这点，样式就总对不上。
为什么 p:first-of-type 有时不生效？
常见错误是以为它会匹配「父元素里第一个 <p>」——这没错，但前提是这个 <p> 真的是该父元素下同类型（即 p）的首个。如果父元素开头是 <h2>、<div> 或注释节点，p:first-of-type 仍会跳过它们，去找第一个 <p>。
- ✅ 正确结构：
<article><h2>标题</h2><p>首段</p><p>次段</p></article>→p:first-of-type匹配“首段” - ❌ 容易踩坑：
<article><!-- 注释 --><p>首段</p></article>→ 注释不影响匹配，仍生效 - ⚠️ 关键陷阱：
<article><p class="intro">导语</p><section><p>正文1</p></section><p>正文2</p></article>→article p:first-of-type匹配的是“导语”，不是“正文1”；而section p:first-of-type才匹配“正文1”
first-of-type 和 first-child 到底差在哪？
看父元素子节点序列就能分清。假设父元素子节点顺序是：<h2>、<p>、<div>、<p>：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
p:first-child→ 不匹配任何<p>（因为第一个子是<h2>） -
p:first-of-type→ 匹配第一个<p>（它是所有p中排第一的） -
:first-child对类型完全不敏感，只认位置；:first-of-type对位置不敏感，只认“同类型中最早出现的那个” - 实际项目中，想“给文章第一段去上边距”，用
p:first-of-type更稳；想“给导航栏第一个菜单项加标识”，且菜单项全是<li>，那li:first-child和li:first-of-type效果一样，但前者语义更准
组合使用时哪些写法有效、哪些会失效？
伪类必须紧贴元素选择器，中间不能有空格；类名/属性可前置，但逻辑要自洽。
立即学习“前端免费学习笔记（深入）”；
- ✅
.card p:first-of-type→ 卡片内第一个<p> - ✅
p.intro:first-of-type→ 是<p>、有intro类、且是其父元素中所有p的第一个 - ❌
p:first-of-type.intro→ 语法错误，伪类不能放类名后面 - ❌
.intro:first-of-type p→ 这是后代选择器，意思是“某个带intro类且是其父元素首个同类型元素的容器下的所有p”，和你想选“首个p”无关 - ⚠️
[data-role="text"]:first-of-type可用，但注意：它匹配的是「第一个具有该属性的同类型元素」，不是“所有带该属性的元素里的第一个”
兼容性与现代替代建议
first-of-type 在 IE9+、所有现代浏览器中完全支持，无需前缀。但它无法解决“跨层级找第一个”的需求——比如你想要“整个 <main> 下第一个 <p>”，而不管它嵌套多深，这时 CSS 无解，得靠 JS 的 document.querySelector('main p')。
- 不要试图用
*:first-of-type做全局首元素捕获——它只会匹配每个父元素下的首个任意类型子元素，结果不可控 - 若需动态控制（如切换后重置样式），CSS 本身无响应式重计算机制，
first-of-type不会随 DOM 增删自动更新“首个”归属；JS 插入新<p>后，原第一个可能变成第二个，样式自动失效 - 真正复杂的选择逻辑（例如“排除广告位后的第一个正文段落”），别硬扛在 CSS 里，交给 JS 标记 class 更可靠
