article:first-child选择器未达预期，如何设置首个p标签为红色？

原本想要给页面里的第一个<p>标签设置红色背景，结果用article:first-child选择器添加样式后，整个<article>元素都变成红色了。相关代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="/ex1.css" />
    <style>
      article:first-child {
        background-color: red;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <article>
      <h1>heading</h1>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro ratione
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate,</p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium
      </p>
    </article>
  </body>
</html>

• 错误原因：article:first-child的作用是选中作为其父元素第一个子元素的<article>标签，而不是<article>内部的第一个<p>，所以整个<article>被应用了红色背景样式。
• 正确写法：要选中<article>内部的第一个<p>标签，需要把选择器改成article > p:first-child（精准匹配<article>的直接子元素里的第一个<p>），或者article p:first-child（匹配<article>内所有层级中的第一个<p>，这里用前者更合适）。

修改后的CSS代码：

article > p:first-child {
  background-color: red;
}

内容的提问来源于stack exchange，提问作者Aayush Sapkota