应使用 p:first-of-type 而非 p:first-child，因后者仅匹配父元素首个子节点且对空白、注释、其他标签敏感，而前者在所有同类型段落中取首项，语义准确、兼容性好，但需加容器限定以防全局污染。
直接用 p:first-of-type，别碰 p:first-child —— 后者在真实 HTML 结构里大概率失效。
为什么 p:first-child 总是不生效
它只认“父元素的第一个直接子节点”，完全不管标签类型。哪怕前面只有换行、空格、注释，或者一个 <h2></h2>、<div class="ad">，<code>p:first-child 就立刻失联。
- HTML 中常见结构：
<article><h1>标题</h1> <p>第一段</p></article>→ 这里<p></p>是第二个子节点，p:first-child匹配失败 - 连 DOM 树里的文本节点（比如段落前的回车）都会干扰匹配，调试时看不到也容易漏查
- 它和“页面上第一个段落”这个业务需求根本不是一回事
p:first-of-type 才是真正靠谱的选择
它只看同类型元素（即所有 <p></p>）中谁排第一，其他兄弟节点（<h2></h2>、<div>、注释、空白）全被无视。
<ul>
<li>兼容性够用：IE9+ 全支持，现代项目基本无压力</li>
<li>语义清晰：<code>p:first-of-type 就是“第一个段落”，不是“第一个孩子”
<section><h2>导语</h2>
<p>首段内容</p>
<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></section> → p:first-of-type 稳稳命中“首段内容”必须加容器限定，否则会全局污染
单独写 p:first-of-type 会作用于整个页面所有 <p></p> 的首个实例，包括页脚、侧边栏、弹窗里的段落 —— 很可能出 bug。
- 推荐写法：
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，别指望继承值可靠
别忘了它只按标签类型计数，不看 class 或属性
p.highlight:first-of-type 和 p:first-of-type 行为完全不同：前者找的是带 highlight 类的第一个 <p></p>；后者找的是所有 <p></p> 中的第一个，哪怕它没 class。
- 如果你要控制“带某个 class 的首个段落”，得用
p.highlight:first-of-type，不是p:first-of-type.highlight（后者语法错误） - 如果父容器里只有一个
<p></p>，那它同时匹配:first-of-type和:last-of-type，这点容易被忽略 - 它不能跨父级查找 —— CSS 没有“文档中第一个
<p></p>”这种全局选择器，所有伪类都严格限制在单个父元素内计算
