:first-of-type只匹配同级兄弟中同标签名的第一个元素，不跨层级、不跳过其他标签、不受视觉位置影响；常见误选子容器内首个p而非整体首个p。
first-of-type在嵌套结构里为什么经常选不到想要的元素
因为 :first-of-type 只看「同级兄弟中同标签名的第一个」，不关心父容器、不跳过其他标签、也不管是否被包裹在别的元素里。它很容易被误认为是“整个结构里的第一个”，实际只是“这一行兄弟里的第一个同类型”。
常见错误现象：div > p:first-of-type 本想选最外层第一个 p，结果却选中了某个子 div 内部的第一个 p——只要那个子 div 下有 p，且它是该子 div 下第一个 p，就命中。
- 它只作用于直接兄弟节点，不会跨层级“穿透”查找
- 如果同级第一个是
h2，第二个才是p，那这个p就不是:first-of-type，哪怕它是整个区块唯一一个p - 多个同名标签混排时（比如
p、div、p），第二个p永远不会被:first-of-type匹配到
怎么用:first-of-type精准锁定“视觉上第一个p”
当 HTML 结构不可控（比如 CMS 输出或第三方组件嵌套），仅靠 :first-of-type 很难保证稳定。更可靠的做法是结合层级约束和排除逻辑：
- 用明确父选择器限定范围，例如
.article-content > p:first-of-type，确保只查.article-content的直接子p - 避免用泛父选择器如
div p:first-of-type，它会匹配所有后代，失去“首个”的意义 - 若需排除某些容器（如广告位、插槽），可加 :not()：
.post-body > :not(.ad-slot) > p:first-of-type - 注意兼容性：
:first-of-type在 IE9+ 支持良好，但不要和:nth-of-type(1)混用——二者行为一致，但后者语义稍弱，且部分旧版 safari 对nth-of-type解析有偏差
替代方案：什么时候该放弃:first-of-type改用其他方式
当你发现无论如何调整选择器都选不准，大概率是场景超出了 :first-of-type 的设计边界。这时候优先考虑更可控的方案：
立即学习“前端免费学习笔记（深入）”；
- 加 class 控制：后端或模板层给“首段”加
class="lead"，写.lead最稳 - 用
:first-child+ 标签判断：如果首子元素确定是p，p:first-child比p:first-of-type更严格（要求必须是第一个子，且是p） - css 逻辑属性辅助：如
margin-block-start: 0配合display: flow-root控制首段间距，绕开选择器依赖 - js 补位（极端情况）：用
document.querySelector('.container > p')拿第一个，再加 class，比纯 CSS 更确定
容易被忽略的细节：伪类对 display 和 visibility 的影响
:first-of-type 的匹配发生在渲染前的 dom 树遍历阶段，它完全不感知样式。也就是说：
-
display: none的元素仍参与计算——它占位，会影响“谁是第一个” -
visibility: hidden不影响匹配，该是第一个还是第一个 - 动态插入内容后，浏览器不会自动重算
:first-of-type状态；新增的p如果插在最前面，才会触发重新匹配 - 使用
content-visibility: auto的容器内，被裁剪掉的子元素仍存在于 DOM 树中，照样参与:first-of-type判定
真正难处理的，从来不是语法怎么写，而是你没法只靠一个伪类去对抗 HTML 结构本身的歧义性。加 class 或收口到 JS，很多时候不是退让，是止损。