:first-child常失效是因为它要求目标元素必须是父节点的第一个子节点且标签名严格匹配，而换行、空格或注释会生成#text节点使其变为第二个子节点；:first-of-type则只按同标签名子元素的DOM顺序选取首个，不受中间杂项干扰。
为什么 :first-child 经常“选不到”第一个 p 或 li
因为它只认 DOM 结构顺序：目标元素必须是父节点的**第一个子节点**，且标签名完全匹配。哪怕前面只有一个换行、空格或 HTML 注释，就会生成一个 #text 或 <!-- --> 节点，导致目标元素变成第二个子节点。
常见失效场景：
-
<ul><!-- 注释 --><li>item</li></ul>中，li:first-child不生效 -
<div>\n <p>段落</p></div>（换行缩进）中，p:first-child失效——#text占了第一个位置 - 服务端注入的
<script>或前端框架插入的<template>也会破坏匹配
:first-of-type 是怎么绕过这些干扰的
它不看位置，只扫描父元素下所有同标签名的子元素（比如所有 p），然后取 DOM 顺序最靠前的那个。中间夹着 h2、div、注释、空白文本，全都不影响。
典型可靠用法：
立即学习“前端免费学习笔记（深入）”；
-
form input:first-of-type→ 无论前面有没有label或提示文字，总能命中第一个input -
article h2:first-of-type→ 即使article开头是<header>或广告<div class="ad">，照样生效 -
section > p:first-of-type→ 只作用于直接子级的p，不会误匹配嵌套在blockquote里的p
两者效果一致的唯一情况
仅当父容器内**所有子节点都是同一标签，且没有文本/注释节点**时，:first-child 和 :first-of-type 才等价。
例如：<ul><li>A</li><li>B</li></ul> 中，li:first-child 和 li:first-of-type 都命中第一个 li。
但只要加一行换行、一个空格、或一个 <!-- comment -->，这个一致性就立刻被打破——而你从源码里几乎看不出来。
嵌套结构里最容易踩坑的地方
写 ul li ul li:first-child 本意可能是“每个子菜单的第一项”，但它实际匹配的是“子 ul 下的第一个子节点，且该节点是 li”。如果子 ul 开头有换行，它就失效。
更稳的写法是：ul li ul li:first-of-type —— 它只关心“这个 ul 里第一个 li 标签”，不管前面有没有空白或其它元素。
注意：:first-of-type 的“类型”仅指 HTML 标签名（p、li、span），和 class、id、data- 属性无关；它也不跨层级，div p:first-of-type 匹配的是 div 内第一个 p（无论嵌套多深），而 div > p:first-of-type 才限定为直接子元素。
