css - 伪元素 :first-child not being picked up

Question

鉴于以下代码片段，我希望包含“Award 1”的 div 具有红色背景色。有人可以向我解释为什么没有吗？第一项应该有一个顶部边框。

.item-wrap:first-child .item {
    border-top: 1px solid black;
}

.item {
    width: 100%;
    border-bottom: 1px solid black;
}

<div class="row awards">
  <div class="col-xs-12">
    <h2 class="no-border">Awards</h2> 
  </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>

Answer 1

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

:第一个 child ( https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child )

在您的示例中，您试图选择一个类为 .item 的元素，该元素位于类为 .item-wrap 的父类中，而类 .item-wrap 本身就是第一个子类其父项(在本例中为 .awards)。由于 .item-wrap 不是 .awards 的第一个 child ，因此它不匹配。

鉴于您的标记，以下规则应该符合您的需要:

.awards :first-child + .item-wrap .item:first-child {
    border-top: 1px solid black;
}

.item {
    width: 100%;
    border-bottom: 1px solid black;
}

<div class="row awards">
  <div class="col-xs-12">
    <h2 class="no-border">Awards</h2> 
  </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>

这将选择一个类为 .item 的元素，该元素是其父元素 .item-wrap 的第一个子元素，紧接其后的第一个子元素属于具有类 .awards 的元素。