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><p>次段内容</p></section> → p:first-of-type 稳稳命中“首段内容”
p，那它同时匹配 :first-of-type 和 :last-of-type，这点容易被忽略p”这种全局选择器，所有伪类都严格限制在单个父元素内计算必须加容器限定，否则会出 bug
单独写 p:first-of-type 会作用于整个页面所有 p 的首个实例，包括页脚、侧边栏、弹窗里的段落 —— 很可能覆盖你不希望改的样式。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
article p:first-of-type、.post-content p:first-of-type、main > p:first-of-type - 优先用语义化标签（如
<main>、<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 处理，而不是硬扛选择器。
