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

你需要用这样的父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>

<强> CSS

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

http://codepen.io/anon/pen/QjJBQL

Answer 2

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

：第一个孩子（https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child）

在您的示例中，您尝试选择类.item的元素，该元素位于具有类.item-wrap的父级中，该类本身是其父级的第一个子级（在本例中为{{1} }}）。由于.awards不是.item-wrap的第一个孩子，因此不匹配。

鉴于您的标记，以下规则应符合您的需求：

.awards

.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的元素的第一个子元素。

Answer 3

＆＃13;

.item-wrap:nth-child(2){
  background: red;
}

＆＃13;

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

＆＃13;

Answer 4

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

<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 class="item">Award 1a</div>
  </div>
  <div class="col-xs-12 item-wrap">
    <div class="item">Award 2</div>
    <div class="item">Award 2a</div>
  </div>
</div>

将选择器放在子项上，而不是父项（http://codepen.io/anon/pen/vNQamR）：

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

伪元素：没有被拾取的第一个孩子

4 个答案: