:first-child仅匹配父元素第一个直接子节点且标签名严格一致，因注释、换行文本节点或前置元素导致失效；:first-of-type则按类型取首个，更容错。
:first-child 不是“选第一个 p”或“选第一个 li”的万能解，它只认一件事：这个元素是不是父容器的**第一个直接子节点**，且标签名必须匹配。不满足就失效，没商量。
为什么 :first-child 经常不生效
根本原因不是写错了选择器，而是 DOM 结构“藏了东西”：
- HTML 注释（
<!-- intro -->）算文本节点，会抢占“第一个”位置 - 换行缩进产生的空白文本节点（比如
<div>\n <p>内容</p>\n</div>中的\n）也会让p变成第二个子节点 - 前面插了个
<h2>、<span>或甚至一个空的<div>，p:first-child就彻底失联
验证方法：打开浏览器开发者工具，展开父元素，看第一个子节点图标是 <p> 还是 #text 或 <!-- -->。
:first-child 和 :first-of-type 到底怎么选
关键区别不在“谁更高级”，而在你要解决什么问题：
立即学习“前端免费学习笔记（深入）”；
-
li:first-child→ 你要样式化“列表里最顶上那个条目”，前提是它确实是第一个子元素（比如干净的<ul><li>...</li></ul>） -
li:first-of-type→ 你要样式化“所有li中排第一的那个”，不管前面有没有<h3>或说明文字 - 动态插入场景（比如 JS 在开头加提示框）：
:first-of-type更稳；纯静态、结构可控的组件内：:first-child更语义清晰
别硬记规则，打开控制台点两下 DOM 就知道该用哪个。
常见误用：靠它清首段 margin-top
很多人这么写：
p { margin: 1.5em 0; }
p:first-child { margin-top: 0; }
但只要 CMS 插入一个 banner <div class="banner"> 到文章开头，这个规则就失效，首段又多出 1.5em 空白。
- 更健壮的做法：给容器设
margin-top: 0，再统一给所有p加margin-top: 1.5em（靠继承和通用性兜底） - 如果非要用伪类，优先写
.article > *:first-of-type，比p:first-child更抗干扰 - 注意：
:first-child在 Flex/Grid 容器中依然按 DOM 顺序匹配，order或grid-template-areas不会影响它
最后提醒一个真·盲区
:first-child 在 Shadow DOM 内部完全不可见——你在自定义 Web Component 的 :host 样式里写 slot > p:first-child，只要 slot 的内容是从外部传入的，这条规则大概率不触发。这时候只能靠外部传 class，或者用 ::slotted(p:first-of-type)（需检查浏览器支持）。
