【CSS】伪类元素 :first-child 的匹配问题

HTML：

 <div>
     <article>
         <h1>我是捣乱的</h1>
         <p>我是老大</p>
         <p>我是老二</p>
         <p>我是老三</p>
     </article>
</div>

CSS：

div p:first-child {
  color: red;
}

按照选择器语序来看，我们是想选中 div 后代元素中的 p 兄弟元素的第一个，并且把它设置为红色。

但是实际不生效！为什么？

h1 标签在作怪，实际上它成了和 p 兄弟元素同级别的老大，但由于它不是 p 元素，因此也不生效。

因此在使用伪类 :first-child 时要注意：:first-child 前面的选择器一定要是同级别当中排在第一个的

也就是像这这样：

<div>
     <article>
         <!-- 四兄弟中排第一 -->
          <p>我是老大</p>
          <h1>我是捣乱的</h1>
          <p>我是老二</p>
          <p>我是老三</p>
     </article>
</div>