p:first-of-type单独使用会全局匹配所有父容器下的首个p元素，导致页脚、侧边栏、弹窗等非目标区域样式被误改；必须加明确父级限定（如article p:first-of-type）才能精准作用于正文首段。
为什么 p:first-of-type 单独写会出 bug
它会匹配整个页面所有父容器下的第一个 p，包括页脚、侧边栏、弹窗里的段落。哪怕你只想改正文首段，p:first-of-type 也会把广告位里那个 p 一起样式化。
更隐蔽的问题是：如果 CMS 输出结构不稳定（比如有时在 article 里插个 div.ad-slot），这个选择器照样生效——但命中的是广告容器里的第一个 p，而不是你预期的正文首段。
- 必须加明确父级限定，例如
article p:first-of-type或.post-content > p:first-of-type - 避免用泛后代选择器如
div p:first-of-type，它会穿透多层嵌套，失去“首个”的语义 - 如果父容器本身是动态生成的（如 React 的 Fragment 包裹），要确认实际 DOM 中是否存在可依赖的稳定父节点
怎么判断该用 :first-of-type 还是 :first-child
p:first-child 要求目标元素必须是父元素的第一个直接子节点；p:first-of-type 只要求它是所有 p 兄弟中排第一的那个，前面可以有 h2、div、注释甚至换行符生成的文本节点。
常见失效场景：p:first-child 在 <section><h2>标题</h2>
<p>首段</p></section> 中完全不生效，因为 p 不是第一个子节点。
- 结构固定且首子必为
p→ 用p:first-child更严格 - 结构含标题、图片、空
div等干扰节点 → 必须用p:first-of-type - DOM 中可能有不可见文本节点（如模板换行）→
:first-child极易意外失效，:first-of-type更鲁棒
嵌套结构里为什么选不到“真正第一个 p”
:first-of-type 只作用于**直接兄弟节点**，不会跨层级查找。它只看“这一行兄弟里谁是第一个同类型”，而不是“整个文档或区块里第一个”。
例如：<div>
<div><p>子容器首段</p></div>
<p>外层首段</p>
</div>，div p:first-of-type 会同时匹配两个 p —— 因为它们各自父级下都只有一个 p，且都是第一个。
- 想锁定外层那个，得写
div > p:first-of-type（子选择器限制层级） - 想排除子容器，可用
.content > :not(.ad-slot) > p:first-of-type - 若结构完全不可控，
:first-of-type已超出能力边界，应改用后端加class="lead"或 JS 补位
首字母样式怎么只作用于文档首个有效段落
单纯 p:first-of-type::first-letter 会命中每个 section 里的第一个 p，不是你想要的“全文首个”。需要两步：先标记所有，再重置后续。
核心是利用 :has() 定位首个含 p 的容器，再用兄弟选择器 ~ 清除之后所有同类首字母：
section p:first-of-type::first-letter { background: #ff6b6b; }
section:has(p:first-of-type) ~ section p:first-of-type::first-letter {
background: unset;
}
:has(p:first-of-type) 是关键——它找到第一个真正含段落的 section，后面的 ~ section 才能精准覆盖后续所有节区。IE 不支持 :has()，此时只能退回到 class 标记方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
