CSS nth类在另一个类中

debugcn 发表于 Dev

艾哈迈德·辛西克

在BE工作了两年后，我才开始进入FE。

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

坚持寻找一种最佳方法来改变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>

屏幕截图显示所需的结果

在我的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)我猜完全没有影响，因为彼此之间没有直接的父子关系。

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

可汗

:nth-of-type()适用于同级元素。因为.progress-bar是类中的第一个兄弟姐妹，.progress并且没有此类的其他兄弟姐妹，所以.progress-bar仅.journey-card-bottom .progress-bar:nth-of-type(1)应用声明的样式。这是一个通过更改HTML结构来显示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;
}

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。