我想很多人已经解释过了。您的代码只选择了第一个实例的第一个子对象。如果你想选择红色类的所有第一个子类，你需要使用

.home > .red:first-child {
    /* put your styling here */
}

出于某种原因，上述答案似乎都没有解决父母真正的第一个和唯一的第一个孩子的情况。

#element_id > .class_name:first-child

如果您只想将样式应用于此代码中的第一个子类，那么以上所有答案都将失败。

<aside id="element_id">
  Content
  <div class="class_name">First content that need to be styled</div>
  <div class="class_name">
    Second content that don't need to be styled
    <div>
      <div>
        <div class="class_name">deep content - no style</div>
        <div class="class_name">deep content - no style</div>
        <div>
          <div class="class_name">deep content - no style</div>
        </div>
      </div>
    </div>
  </div>
</aside>

由于其他答案涵盖了它的问题，我将尝试另一半，如何解决它。不幸的是，我不知道你有一个CSS唯一的解决方案，至少不是我能想到的。还有一些其他的选择....

在生成元素时给元素赋一个first类，如下所示: <p class="red first"></p> . < div class = "红色" > < / div > CSS: 当代。红色{ 边框:5px纯红色; ｝ 这个CSS只匹配第一个类和红色类的元素。 或者，在JavaScript中做同样的事情，例如这里是你会使用jQuery来做这件事，使用与上面相同的CSS: $ (r:首先).addClass(“第一”);

下面的代码肯定在任何地方都能正常工作。 它简单而简短。

<div class="home">
    <span>blah</span>
    <p class="blue"> first-blue  </p>
    <p class="blue"> second-blue </p>
    <p class="blue"> third-blue  </p>

    <p class="red">  first-red   </p>
    <p class="red">  second-red  </p>
    <p class="red">  third-red   </p>
    <p class="red">  fourth-red  </p>

    <p class="pink"> first-pink  </p>
    <p class="pink"> second-pink </p>

    <p class="red">  new-first-red   </p>
    <p class="red">  new-second-red  </p>
</div>

我们可以选择第一个红色:

.home .red:not(.home .red ~ .red) {
    background-color: blue;
}

如果你想选择new-first-red，你应该使用+而不是~。

你可以使用first-of-type或n -of-type(1)

r { 颜色:绿色; ｝ /* .red:n -of-type(1) */ r: first-of-type { 颜色:红色; ｝ < div class = "家" > < span >等等> < /跨度 < p class = "红色" >第一个< / p > < p class = "红色" >第二< / p > < p class = "红色" > < / p >第三 < p class = "红色" >第四< / p > < / div >

为了匹配选择器，元素的类名必须为红色，并且必须是其父元素的第一个子元素。

<div>
    <span class="red"></span> <!-- MATCH -->
</div>

<div>
    <span>Blah</span>
    <p class="red"></p> <!-- NO MATCH -->
</div>

<div>
    <span>Blah</span>
    <div><p class="red"></p></div> <!-- MATCH -->
</div>