p:first-of-type常误选广告段落，因它只按同级兄弟中首个同标签元素匹配，不考虑视觉层级；用.post > p:first-of-type可限定为直接子元素，更精准；加class如.lead才是最稳定方案。
为什么 p:first-of-type 常常选中了不该选的段落
它只看「同级兄弟中第一个同标签名的元素」，不关心这个元素在视觉上是不是你想要的“正文首段”。比如父容器里有 <h3></h3>、<p></p>、<div class="ad-slot"><p>广告文案</p></div>，那么 .content p:first-of-type 会匹配广告容器里的那个 <p></p>，只要它是其父 <div class="ad-slot"> 下的第一个 <code>p。
根本原因在于：:first-of-type 是按 DOM 树中的**同级兄弟关系**计算的，不是按你写的 HTML 层级意图或视觉流判断的。
- 它会穿透任意深度的嵌套，只要路径上没加子选择器限制
- 它不跳过其他标签，但也不“跨容器”——每个父元素各自算自己的第一个
- 如果目标
p前面还有同级的<header></header>、<aside></aside>或文本节点，它依然能被选中（这反而是优点）
.article > p:first-of-type 才是真正锁定“直接子段落”的写法
关键不是“怎么写更复杂”，而是用 > 切断后代匹配，把作用域锁死在一层。
对比下面两种写法：
.post p:first-of-type /* 危险：钻进 .post 里所有 div/section/aside 内部找第一个 p */ .post > p:first-of-type /* 安全：只检查 .post 的直接子元素，且必须是 p */
- 前者可能命中侧栏、卡片、广告位里的
p；后者只会匹配<div class="post"><p>…</p></div>这种结构 - 若父容器下第一个子元素不是
p（比如是<h2></h2>），> p:first-of-type仍能正确选中紧随其后的第一个p - 如果需要排除某些子容器，可叠加
:not()：.post > :not(.ad-slot, .placeholder) > p:first-of-type
当只有一个 p 却不被 :first-of-type 匹配时，问题出在“同级”上
看这个结构：
<div class="article"> <div class="card"></div> <p>你想样式化的段落</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>
这个 p 不会被 .article p:first-of-type 漏掉，但会被 .article > p:first-of-type 正确选中——因为它是 .article 的直接子元素中唯一的 p，自然就是“同类型中的第一个”。
但如果写成：
<div class="article"> <div></div> <p>段落A</p> <p>段落B</p> </div>
-
.article > p:first-of-type→ 匹配“段落A” ✔️ -
.article > p:last-of-type→ 匹配“段落B” ✔️ -
.article > p:first-child→ 不匹配任何内容 ❌（因为第一个子是<div>）<p>也就是说，<code>:first-of-type在这种结构里反而比:first-child更可靠，前提是作用域限定得准。别依赖标签名，加 class 才是最稳的方案
纯靠
p:first-of-type隐含一个假设：结构永远不变、没有第三方模块插入、没有 SSR/CSR 渲染顺序差异。现实里，一个 CMS 插入的推荐卡片、广告组件、A/B 测试占位符，都可能悄悄改变同级结构。真正抗干扰的做法是主动标记：
- HTML 中加语义 class：
<p class="lead">首段文案</p> - CSS 直接写：
.lead { font-size: 1.2em; font-weight: 600; } - 或者组合使用：
.article > .lead:first-of-type（双重保险）
复杂页面里，最不容易出错的“首个”从来不是靠浏览器自动推导出来的，而是你亲手写进 HTML 的那个
class。 - HTML 中加语义 class：
