p:first-of-type才是正确选择，它无视非p兄弟节点，精准匹配父容器内第一个p元素；必须用容器限定（如article p:first-of-type），否则会全局污染；它不跨父级查找，且需配合语义化标签或稳定class使用。
直接用 p:first-of-type，但必须加容器限定 —— 单独写它会污染全局，而且根本不是你想要的“文章首段”。
为什么 p:first-child 总是不生效？
它只认父元素的第一个直接子节点，完全不管是不是 p。哪怕前面有个换行、空格、<h2></h2> 或注释，p:first-child 就立刻失效。DOM 树里看不见的文本节点（比如段落前的回车）也会干扰匹配，调试时很难发现。它和“页面上第一个段落”这个业务需求根本不对应。
p:first-of-type 才是真正靠谱的选择
p:first-of-type 只看所有 p 元素中谁排第一，其他兄弟节点（<h2></h2>、<div>、注释、空白）全被无视。语义清晰：就是“第一个段落”。
<ul>
<li>示例 HTML：<code><section><h2>导语</h2>
<p>首段内容</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发"><img
src="https://img.php.cn/upload/skill/000/000/081/179033410052138.jpg" alt="PigX UI 前端开发" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="overflowclass">PigX UI 前端开发</a>
<p class="overflowclass">PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。</p>
</div>
<a rel="nofollow" href="/xiazai/skill5092" title="PigX UI 前端开发" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>次段内容</p></section> → p:first-of-type 稳稳命中“首段内容”
p，那它同时匹配 :first-of-type 和 :last-of-type，这点容易被忽略p”这种全局选择器，所有伪类都严格限制在单个父元素内计算必须加容器限定，否则会出 bug
单独写 p:first-of-type 会作用于整个页面所有 p 的首个实例，包括页脚、侧边栏、弹窗里的段落 —— 很可能覆盖你不希望改的样式。
- 推荐写法：
article p:first-of-type、.post-content p:first-of-type、main > p:first-of-type - 优先用语义化标签（如
<main></main>、<section></section>）或稳定 class 限定范围，别依赖 DOM 深度 - 如果首段需要去上边距或取消首行缩进，记得显式重置：
margin-top: 0或text-indent: 0，别指望继承值可靠 - 注意：
p.highlight:first-of-type和p:first-of-type行为完全不同 —— 前者找的是带highlight类的第一个p；后者找的是所有p中的第一个，哪怕它没 class
真正要注意的是：定位首段，本质是选对父容器 + 用对伪类。复杂点在于，你得先确认那个“首段”到底在哪个父级里 —— 如果结构嵌套深、容器 class 不稳定，或者用了 CMS 自动生成的不可控 wrapper，:first-of-type 就会失效。这时候就得退回到加 class 或 JS 处理，而不是硬扛选择器。
