为什么背景颜色仅适用于父类？

Question

这是一个在SCSS中绘制正方形的简单示例。为什么背景颜色仅在.color而非.black时生效？

CodePen

<div class="color black"></div>

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  .black {
    background: #000;
  }
}

Answer 1

因为.black认为它是一个子元素。所以.black部分正在寻找一个.color的孩子。

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  .black {
    background: #000;
  }
}

如果您的HTML看起来像这样

<div class='color'>
    <div class='black'></div>
</div>

然后它会正常工作。

实际上，你需要在黑色前面&。

.color {
  width: 112px;
  height: 112px;
  display: block;
  // background: #000;
  &.black {
    background: #000;
  }
}

这就像你期望的那样。