p:first-of-type常选错首段，因它匹配每个父容器内首个同标签兄弟元素，而非文档或视觉首段；需用>.article>p:first-of-type等限定父容器来精准定位。
p:first-of-type 能选中父元素内第一个 p，但它不是“文档里第一个 p”，而是“每个父容器中各自第一个 p”——不加限定就用，大概率命中侧边栏、广告位或页脚里的意外段落。
为什么 p:first-of-type 常常选错首段
它只看「同级兄弟中同标签名的第一个」，完全不管这个 p 是不是你想要的正文区域里的。常见误匹配场景：
- 父容器是
<div class="content">，但里面嵌套了<div class="sidebar"><p>联系我</p></div>→ 这个p会被选中 - HTML 开头有注释、空格或
<h2>→ 不影响匹配，但会把“视觉上第一个段落”变成第二个子节点 - 写成
div p:first-of-type（带空格）→ 变成后代选择器，会钻进任意深度的div里找首个p，包括卡片、弹窗、插槽
真正锁定文章首段的写法
关键不是加更多层级，而是切断作用域、明确父容器。推荐组合方式：
- 用
>强制只查直接子元素：.article > p:first-of-type或article > p:first-of-type - 配合语义化容器更稳：
main > p:first-of-type、.post-body > p:first-of-type - 排除干扰区域：
.entry-content > :not(.ad, .placeholder) > p:first-of-type（注意：这种写法需确认浏览器支持程度）
容易被忽略的兼容与渲染细节
看似简单的选择器，在真实项目里有几个硬约束：
立即学习“前端免费学习笔记（深入）”；
-
p:first-of-type在 IE9+ 支持良好，但:not()复合写法在 IE11 及以下可能失效 - 如果首段前有隐藏元素（如
display: none的div），它不影响:first-of-type匹配——因为伪类只看 DOM 结构，不看渲染状态 - 文本节点（换行、空格）和注释节点会被跳过，所以
<!-- 注释 --><p>首段</p>仍能匹配成功 - 若父容器下只有一个
p，那它既是:first-of-type也是:last-of-type，别指望靠这个做逻辑判断
最常出问题的，不是不会写 :first-of-type，而是没想清楚「这个 p 的父容器到底是谁」——DOM 树里多一层 wrapper，样式就可能彻底失效。
