SCSS 背景颜色未显示（angular2+ typescript）答案

【问题标题】：SCSS background-color not showing up (angular2+ typescript)SCSS 背景颜色未显示（angular2+ typescript）
【发布时间】：2020-03-03 00:09:20
【问题描述】：

我有一个带有嵌套 div 的 HTML。我的孩子 div 没有显示背景颜色：#00000

我试过溢出：隐藏且重要，没用

HTML

<div class="container">
  <div class="progress">
    <div class="progress-track"></div>
    <div id="Created" class="progress-step">
      Created
    </div>
    <div id="Approved" class="progress-step">
      Approved
    </div>
    </div>
  </div>

SCSS

.container {
  border: double;
  margin-left: 50%;
}

.progress {
  position: relative;
  display: flex;
}

.progress .progress-track {
  position: absolute;
  background-color: #a82222;
  height: 22px;
  z-index: -1;
  overflow: hidden;
}

这个类不起作用 --> .progress .progress-track {}

【问题讨论】：

标签： html typescript class sass

【解决方案1】：

不确定您想要实现什么，但您的类选择器正在工作。如果你想让它显示#a8222 背景颜色，你必须给它一些宽度，或者添加一些文本。请看下面的代码示例：

.progress .progress-track {
  width: 100px;
  /* position: absolute; */
  background-color: #a82222;
  /* height: 22px;
  z-index: -1; */
  /* overflow: hidden; */
}

查看下面的 JsFiddle 示例：

https://jsfiddle.net/97g3o81s/11/

【讨论】：