Html cssn'；第四节课在另一节课上

在BE工作了几年后，我才开始生活

在FE上使用

Angular

，在BE上使用

.net Core

开发分析卡

研究了一个要点，以了解更改主类下类的

背景色：

属性的最佳实践

  <div class="row">
    <div class="journey-card-bottom">
      <div *ngFor="let bottom of top.breakDown | keyvalue: originalOrder">
        <div>
          <span>{{bottom.key}}</span>
        </div>
        <div class="row">
          <div class="col-lg-10">
            <div class="progress">
              <div class="progress-bar" role="progressbar"
                [ngStyle]="{'width': bottom.value > 0 ? bottom.value + '%' : '8px'}"></div>
              <span class="percentage-value">{{bottom.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

似乎

：第n个类型（1）

改变了背景色，但不仅仅是第一个条，而是所有条的背景色

：第n种类型（2）

根本不起作用，因为彼此之间没有直接的父子关系

另一方面，我知道我可以基于

[ngFor]

中的项目索引使用

[ngStyle]

来实现，但是我不确定这是否是最佳实践。

：nth-of-type（）

适用于同级元素。由于

.progress bar

是

.progress

中的第一个同级，并且没有类

.progress bar

的其他同级，因此只有

.旅程卡底部声明的样式。将应用类型（1）

的第n个进度条。下面是一段代码片段，显示了CSS通过更改HTML结构来工作：

。旅程卡底部{
边框：1px实心#DADCDD；
框大小：边框框；
填充：10px；
线高：3；
宽度：100%；
高度：435px；
}
.进展{
背景色：白色！重要；
边缘顶部：5px；
}
.进度条{
边界半径：0.25雷姆；
高度：8px；
自对准：居中；
背景色：#0B4886；
}
.行程卡底部。进度条：第n个类型（1）{
背景色：#68D391；
}
.行程卡底部。进度条：第n个类型（2）{
背景色：#FCAF65；
}

90
60

.journey-card-bottom {
  border: 1px solid #DADCDD;
  box-sizing: border-box;
  padding: 10px;
  line-height: 3;
  width: 100%;
  height: 435px;
}

.progress {
  background-color: white !important;
  margin-top: 5px;
}

.progress-bar {
  border-radius: 0.25rem;
  height: 8px;
  align-self: center;
  background-color: #0B4886;
}

.journey-card-bottom .progress-bar:nth-of-type(1) {
  background-color: #68D391;
}

.journey-card-bottom .progress-bar:nth-of-type(2) {
  background-color: #FCAF65;
}