css - 仅当父元素是第一个元素时，如何将样式应用于父元素下的特定元素？

Question

我需要将样式应用于 p 标记 只有 如果它是父元素下的第一个元素。我已经尝试搜索 Google 和 Stack Overflow，但我可能没有输入正确的搜索来获得我需要的东西，因为我找不到我需要做什么的示例。

如果我需要在下面的代码中将文本更改为红色，我可以使用什么 CSS？

<div class="main">
  <p>This will be red.</p>
  <p>This will not be red.</p>
  <p>This will not be red.</p>
</div>

<div class="main">
  <h1>Title</h1>
  <p>This will not be red.</p>
</div>

<div class="main">
  <img src="" alt="">
  <p>This will not be red.</p>
</div>

Answer 1

:first-child 选择器将执行此操作。

.main p:first-child {
  color: red;
}

<div class="main">
  <p>This will be red.</p>
  <p>This will not be red.</p>
  <p>This will not be red.</p>
</div>

<div class="main">
  <h1>Title</h1>
  <p>This will not be red.</p>
</div>

<div class="main">
  <img src="" alt="">
  <p>This will not be red.</p>
</div>