另一个类中的 CSS nth 类答案

【问题标题】：CSS n'th class in another class另一个类中的 CSS nth 类
【发布时间】：2021-04-17 18:20:07
【问题描述】：

我在 BE 工作了几年后才开始 FE。

在 FE 上使用 Angular 和在 BE 上使用 .net Core 来开发分析卡。

坚持要找出更改主类下方类的background-color: 属性的最佳实践。

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

Screenshot to the desired outcome

在我的 CSS 中；

.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;
}

似乎:nth-of-type(1) 改变了背景颜色，但不仅是第一条，而是所有的。

:nth-of-type(2)我想根本没有影响，因为彼此之间没有直接的父子关系。

另一方面，我知道我可以根据[ngFor] 中的项目索引使用[ngStyle] 来实现，但我不确定这是否是最佳实践。

【问题讨论】：

标签： html css angular frontend

【解决方案1】：

:nth-of-type() 适用于兄弟元素。由于.progress-bar 是.progress 中的第一个兄弟姐妹，并且没有其他具有.progress-bar 类的兄弟姐妹，因此只会应用.journey-card-bottom .progress-bar:nth-of-type(1) 中声明的样式。这是一个代码 sn-p 显示您的 CSS 通过更改 HTML 结构工作：

.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;
}

<div class="journey-card-bottom">
  <div class="progress">
    <div class="progress-bar" role="progressbar"></div>
    <span class="percentage-value">90</span>
    <div class="progress-bar" role="progressbar"></div>
    <span class="percentage-value">60</span>
  </div>
</div>

为了解决您的问题，我建议在 for 循环的顶级元素上使用 :nth-of-type()。在下面的示例中，顶级元素具有类 .target-class：

.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;
}

.target-class:nth-of-type(1) .progress-bar {
  background-color: #68D391;
}

.target-class:nth-of-type(2) .progress-bar {
  background-color: #FCAF65;
}

<!-- Rendered HTML from the component -->
<div class="row">
  <div class="journey-card-bottom">
    <div class="target-class">
      <div>
        <span>Passed</span>
      </div>
      <div class="row">
        <div class="col-lg-10">
          <div class="progress">
            <div class="progress-bar" role="progressbar"></div>
            <span class="percentage-value">90</span>
          </div>
        </div>
      </div>
    </div>

    <div class="target-class">
      <div>
        <span>Referred</span>
      </div>
      <div class="row">
        <div class="col-lg-10">
          <div class="progress">
            <div class="progress-bar" role="progressbar"></div>
            <span class="percentage-value">60</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：