CSS和第一个孩子

Question

在CSS中，我选择＆＃34; first-child＆＃34;。我只想在红色背景上<div class="b">1</div>。我不明白

＆＃13;

＆＃13;

div {
  height: 50px;
  margin-bottom: 10px
}

.a .b:first-child {
  background: red
}

＆＃13;

<div class="a">
  <div class="b">1</div>
  <div class="c">
    <div class="b">2</div>
    <div class="b">3</div>
    <div class="b">4</div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.a .b:first-child表示.b:first-child的后代.a。空间是后代组合者;它没有以任何方式将:first-child与.a联系起来。

您希望使用儿童组合子.a直接生成.a > .b儿童。

Answer 2

我认为您希望first-child上的.a伪课程，而不是.b。

div {
  height: 50px;
  margin-bottom: 10px
}

.a:first-child {
  background: red
}

<div class="a">
  <div class="b">1</div>
  <div class="c">
    <div class="b">2</div>
    <div class="b">3</div>
    <div class="b">4</div>
  </div>
</div>