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

本文介绍了如何仅当父元素是第一个元素时才将样式应用于父元素下的特定元素？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我只需要对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="IiZndDsKICAmbHQ7cCZndDtUaGlzIHdpbGwgbm90IGJlIHJlZC4mbHQ7L3AmZ3Q7CiZsdDsvZGl2Jmd0Owo8L2NvZGU+PC9wcmU+CjxoMyBjbGFzcz0="h-catalog' rel='catalog'>推荐答案
:first-child选择器将执行此操作。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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