Css 伪元素：未拾取的第一个子元素

鉴于以下片段，我希望包含“奖励1”的div具有红色背景色。有人能给我解释一下为什么没有？第一项应该有边框顶部

.item wrap:第一个子项.item{
边框顶部：1件纯黑；
}
.项目{
宽度：100%；
边框底部：1px纯黑；
}

奖品
奖励1
奖励2

。项目包装：第n个子项（2）{
背景：红色；
}

奖品
奖励1
奖励2

。项目：第一个孩子{
颜色：红色；
}

奖品
奖励1
裁决1a
奖励2
奖励2a

您需要像这样用父div包装子元素

HTML

<div class="row awards">
  <div class="col-xs-12">
    <h2 class="no-border">Awards</h2> 
  </div>
    <div>
      <div class="col-xs-12 item-wrap">
        <div class="item">Award 1</div>
      </div>
      <div class="col-xs-12 item-wrap">
        <div class="item">Award 2</div>
      </div>
    </div>
</div>

：first-child CSS伪类表示作为其父元素的第一个子元素的任何元素

：第一个孩子（）

在您的示例中，您试图选择一个类为

.item

的元素，该元素位于类为

.item wrap

的父元素中，该类本身是其父元素的第一个子元素（在本例中为

.awards

）。由于

.item wrap

不是

的第一个子项。awards

不匹配

考虑到您的标记，以下规则应适合您的需要：

。奖励：第一个孩子+。项目包装。项目：第一个孩子{
边框顶部：1件纯黑；
}
.项目{
宽度：100%；
边框底部：1px纯黑；
}

奖品
奖励1
奖励2

Try just.item wrap:first child没有：（.只是重试后的宿醉；按原样发布，但仍然不是womm:）没有css2标记；）那不是我想要的。我希望在第一个包装上有一个边框顶部，这是一个bootsrap单元，跨越100%。问题更新了。这个有效。但我不知道为什么，因为他们已经有了父母…这看起来像是一个黑客（但大概不是）问题是每个孩子都没有。项目包装：）啊，所以我指定的规则是说“第一个孩子有阶级”，而不是“第一个孩子有阶级”？不是我怎么理解的。。

.item-wrap:first-child .item {
    background-color:red;
}