:first-of-type 匹配父元素中同标签名的第一个元素，而非第一个子元素；它忽略文本、注释及其他标签，只按标签类型在同类中取 DOM 顺序最早者。
:first-of-type 不是“选父元素第一个子元素”，而是“在父元素所有子节点中，挑出同标签名的那些，取其中 DOM 顺序最早的那一个”。它跳过文本节点、注释、其他标签，只比同类。这点搞错，样式就总对不上。
为什么 p:first-of-type 有时不生效？
常见误判是以为它会匹配「父元素里第一个 <p></p>」——这没错，但前提是这个 <p></p> 真的是该父元素下同类型（即 p）中第一个出现的。如果父元素开头是 <h2></h2>、<div> 或 HTML 注释，<code>p:first-of-type 仍会跳过它们，继续往后找第一个 <p></p>。
- 失效示例：
<div> <!-- hint --><p>段落</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>中，p:first-child完全不匹配，但p:first-of-type依然生效 - 调试建议：打开浏览器开发者工具 → 右键检查父元素 → 在 Elements 面板中看子节点列表（含
#text和<!-- -->），确认目标p是否真为同类中首个 - 注意：源码换行、空格、服务端注入的提示
<div class="tip"> 都可能让 <code>:first-child失效，但:first-of-type不受影响怎么写才真正锁定“容器内首个直接子
p”？关键不是加更多层级，而是切断后代匹配路径，强制限定作用域。
立即学习“前端免费学习笔记（深入）”；
- 用
>明确只查直接子元素：.article > p:first-of-type—— 只匹配.article下第一层的p - 避免泛选择器：
div p:first-of-type是危险的，它等价于div * p:first-of-type，会钻进任意深度，比如命中侧边栏广告位里的p - 若需排除特定容器（如广告、插槽），用
:not()组合：.post-body > :not(.ad-slot, .placeholder) > p:first-of-type
:first-of-type和:first-child到底差在哪？:first-child只认位置，不认标签类型；:first-of-type只认标签名，不认位置。二者在纯同标签结构中效果相同，但混排时行为迥异。-
li:first-child要求目标<li>必须是<ul></ul>的第一个子节点，哪怕前面只有换行符也会失效 -
li:first-of-type会忽略<ul></ul>开头的<header></header>、<div> 或注释，只要它是所有 <code><li>中 DOM 顺序最早的，就匹配 - 兼容性提醒：
:first-of-typeIE8 不支持；若需兼容旧环境，得用 class 或 JS 回退
最常被忽略的一点：作用域永远由选择器中离目标元素最近的父级决定，不是整个页面或最外层容器。写
article p:first-of-type，它匹配的是每个article内部各自的首个p，不是全局唯一一个。 - 用
