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

问题描述

我只需要对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>

推荐答案

: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>