:first-child仅匹配父元素第一个直接子节点且标签名严格一致，因注释、换行文本节点或前置元素导致失效；:first-of-type则按类型取首个，更容错。
:first-child 不是“选第一个 p”或“选第一个 li”的万能解，它只认一件事：这个元素是不是父容器的**第一个直接子节点**，且标签名必须匹配。不满足就失效，没商量。
为什么 :first-child 经常不生效
根本原因不是写错了选择器，而是 DOM 结构“藏了东西”：
- HTML 注释（
<!-- intro -->）算文本节点，会抢占“第一个”位置 - 换行缩进产生的空白文本节点（比如
<div>\n <p>内容</p>\n</div>中的\n）也会让p变成第二个子节点 - 前面插了个
<h2></h2>、<span></span>或甚至一个空的<div>，<code>p:first-child就彻底失联验证方法：打开浏览器开发者工具，展开父元素，看第一个子节点图标是
<p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>还是#text或<!-- -->。:first-child和:first-of-type到底怎么选关键区别不在“谁更高级”，而在你要解决什么问题：
-
li:first-child→ 你要样式化“列表里最顶上那个条目”，前提是它确实是第一个子元素（比如干净的<ul><li>...</li></ul>） -
li:first-of-type→ 你要样式化“所有li中排第一的那个”，不管前面有没有<h3></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 空白。<ul> <li>更健壮的做法：给容器设 <code>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)（需检查浏览器支持）。
