:first-child常失效是因为它要求元素必须是父元素的第一个子节点且类型匹配，而:first-of-type只按标签名在同类中选第一个，更稳定可靠。
为什么 :first-child 经常“选不到”你想要的元素
因为 :first-child 只认结构顺序：它要求目标元素**必须是父元素的第一个子节点，且类型完全匹配**。只要前面有注释、换行空格（文本节点）、（比如 Live Server 自动注入）、或别的标签，它就失效。
- HTML 里写
段落
p:first-child不生效 - 服务端渲染或 JS 动态插入了隐藏
→ 同样破坏:first-child的匹配 - 即使那个
确实是页面中唯一的p，只要不是第一个子节点，它就“看不见”
:first-of-type 是怎么绕过结构陷阱的
:first-of-type 不看位置，只看“同类中第几次出现”。它在父元素所有子节点中扫描，找出所有同标签名（如 p、li、span）的元素，然后取其中第一个。
-
p:first-of-type→ 找到父容器内所有，选第一个，不管它前面有没有或空格 - 支持组合使用：
.card p:first-of-type有效，p.special:first-of-type也有效——但注意：它匹配的是「带special类的p中的第一个」，不是「所有p中第一个带special的」 - 不区分
class或id，只按标签名归类；同一个父容器里若只有一个，那它自动就是li:first-of-type
实际场景中该选哪个？
多数时候你应该优先用 :first-of-type——更稳定、更符合直觉。
- 文章首段加粗：
p:first-of-type { font-weight: bold; }（比p:first-child更可靠） - 列表第一项高亮：
li:first-of-type { background: #fff3cd; }（哪怕列表前有标题或说明文字） - 表单首个输入框加边框：
form input:first-of-type { border-top: 2px solid #007bff; } - 只有当你**明确依赖 DOM 结构顺序**时才用
:first-child，例如：强制让容器第一个子元素占满宽度，不管它是什么标签
容易被忽略的关键细节
:first-of-type 的“类型”仅指 HTML 标签名，和语义、属性、状态都无关；它也不跨层级——只作用于直接子元素（除非你写后代选择器如 article p:first-of-type）。
- 它不能选中不存在的元素：父容器里没有
，li:first-of-type就什么都不做 - 和
:nth-of-type(1)效果完全等价，但前者语义更清晰、书写更短 - 兼容性极好：IE9+ 全支持，不用考虑降级
- 真正复杂的地方在于嵌套结构——比如
section > div > p:first-of-type，要确认你数的是哪一层的“第一个p”
