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

【问题标题】：How to apply styles to specific element under parent only if it's the first element?仅当它是第一个元素时，如何将样式应用于父元素下的特定元素？
【发布时间】：2017-01-27 21:05:24
【问题描述】：

我需要将样式应用于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>

【问题讨论】：

标签： css css-selectors parent-child

【解决方案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>

【讨论】：

【解决方案2】：

<div class="main">
  <p class = "first">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>

只需添加一个简单的类，然后在您的 CSS 中添加 .first {color: red; } 和其他 p {color: blue; //or whatever colors}

*这可能看起来很乏味，但只需制作类或 ID 并将它们添加到您想要更具体样式的元素中。

或者按照 Coker 的建议去做，这也行得通！

【讨论】：

【解决方案3】：

只需几行 CSS 即可完成。

.main  p:first-child {

  color: red;
}

这是处理您的 HTML 的代码。

https://jsfiddle.net/f8Ljkpt5/

【讨论】：

OP 的问题是 “只有当 p 标签是父元素下的第一个元素时，我才需要对它应用样式。” 虽然您的代码适用于他们的示例，但 OP 并不打算这样做仅适用于.main:first-child - 仅适用于.main p:first-child