如何仅当父元素是第一个元素时才将样式应用于父元素下的特定元素？ [英] How to apply styles to specific element under parent only if it's the first element?

问题描述

我只需要对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选择器将执行此操作。

数据-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>

这篇关于如何仅当父元素是第一个元素时才将样式应用于父元素下的特定元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！