p:first-of-type常“选错”因只在单个父元素内找首个p，不区分语义区域；应限定父容器如.article > p:first-of-type，避免全局使用。
直接用 p:first-of-type 通常能命中首个段落，但前提是它真在你期望的父容器里 —— 否则会误选侧边栏、广告位甚至页脚里的 <p>。
为什么 p:first-of-type 常常“选错”
它只看「同级兄弟中第一个 p」，不关心这个 p 是不是你想要的正文区域里的：
- 如果页面有多个
<div class="sidebar"><p>…</p></div>，它也会被匹配 - 哪怕那个
p是孙子级（比如div > article > p:first-of-type），只要结构满足，照样生效 - 空白文本节点、HTML 注释、
<script>标签都不影响匹配 —— 它只数p标签本身
真正可靠的写法：限定父容器 + 明确子代关系
不要依赖全局 p:first-of-type，而是把作用域收窄到语义明确的容器内：
- 用
>强制只查直接子元素：.article > p:first-of-type（不会钻进嵌套div） - 避免泛后代写法：
div p:first-of-type等价于div * p:first-of-type，极其危险 - 排除干扰区块：
.post-body > :not(.ad-slot, .placeholder) > p:first-of-type（需注意浏览器兼容性） - 优先使用语义化标签限定：
main > p:first-of-type或article > p:first-of-type
别和 :first-child 混用，也别指望它跨父级找
:first-of-type 不是“文档中第一个 p”，它永远只在**单个父元素内部**计数：
立即学习“前端免费学习笔记（深入）”；
-
article p:first-of-type会匹配每个article内的第一个p，不是整个页面唯一一个 -
:first-child要求目标必须是父元素第一个子节点 —— 前面有个<h2>或换行符就失效，而:first-of-type不care这个 - 如果你发现样式没生效，先检查父容器是否真的包含你预期的
p，而不是默认以为“页面首段”天然可被全局选中
最易被忽略的一点：CSS 里没有“全文档首个 p”这种选择器；所有伪类都严格绑定父级上下文。定位首段，本质是两步：选对父容器，再用对 :first-of-type。
