:first-of-type只匹配同级兄弟中同标签名的第一个元素，不穿透父级、不跳过其他节点、不认视觉顺序；如div p:first-of-type会匹配所有后代div内首个p，易误选广告位等非目标元素；应改用.article > p:first-of-type限定直接子元素，或加class/.lead更可靠。
为什么 :first-of-type 在嵌套结构里常选错元素
它只看「同级兄弟中同标签名的第一个」，不穿透父容器、不跳过其他类型节点、也不管视觉顺序。比如 div p:first-of-type 会匹配所有 div 后代中每个 div 内第一个 p，哪怕那个 div 是孙子级的广告位容器。
常见错误现象：
-
.content p:first-of-type本想选正文首段，结果命中了侧边栏里一个<div class="sidebar"><p>…</p></div> - 同级结构是
<h3>标题</h3> <p>正文</p> <div>其他内容</div> <p>第二段</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件"><img src="https://img.php.cn/upload/manual/000/000/010/170901721079108.gif" alt="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="overflowclass">使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件</a> <p class="overflowclass">如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更</p> </div> <a rel="nofollow" href="/xiazai/shouce/1862" title="使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，第二个p永远不会被:first-of-type匹配到 - 父元素第一个子是
<span></span>，第二个才是<p></p>，这个p虽然是唯一p，但不是:first-of-type（因为前面有同级兄弟）
怎么写才真正锁定“容器内首个直接子 p”
关键不是加更多层级，而是切断后代匹配路径，强制限定作用域。
- 用
>明确只查直接子元素：.article > p:first-of-type—— 只匹配.article下第一层的p - 避免泛选择器：
div p:first-of-type是危险的，它等价于div * p:first-of-type，会钻进任意深度 - 若需排除特定容器（如广告、插槽），用
:not()组合：.post-body > :not(.ad-slot, .placeholder) > p:first-of-type - 注意：
:not(.class) > p:first-of-type不合法，:not()不能带后代选择器，必须写成.post-body > :not(.ad-slot) > p:first-of-type
:first-of-type 和 :first-child 到底该用哪个
二者语义不同，选错会导致样式失效。
-
p:first-child：要求目标p必须是父元素**第一个子节点**，且类型为p。如果前面有<h2></h2>或<div>，它就匹配不到<li> <code>p:first-of-type：只要它是父元素下**同类型中第一个**，前面有没有其他标签不影响。更宽松，也更常用 - 当结构可控且首子必为
p时，p:first-child更严格；当首子不确定、但确定要首段文字时，p:first-of-type更可靠 - 不要混用：
p:first-child:first-of-type等价于p:first-child，冗余且易读性差 - 后端或模板能加 class 就加：
<p class="lead"></p>+.lead，稳定、语义清、无兼容顾虑 - JS 补位更确定：
document.querySelector('.container > p')拿到首个再加 class，比 CSS 选择器容错率高得多 - 用逻辑属性绕开选择器依赖：比如
.content > p { margin-block-start: 1em; } .content > p:first-of-type { margin-block-start: 0; }，但前提是布局用的是flow-root或标准块流 - IE9+ 虽支持
:first-of-type，但旧 Safari 对:nth-of-type(1)解析不稳定，别用它替代
什么时候该放弃 :first-of-type 改用别的方案
纯 CSS 选择器在 DOM 结构不可控时天然乏力，硬套只会增加维护成本。
真正难的不是写出能跑的选择器，而是判断什么时候不该用它——DOM 层级一乱，:first-of-type 的“首个”就不再是人眼看到的那个“首个”。
