css - 使用 css 我可以应用已经存在的不同背景图像属性(不使用 jquery)

Question

我有

<parentdiv class="a">
  <child1 class="b"></child1>
  <child2 class="b"></child2>
  <child3 class="b"></child3>
</parentdiv>

使用 css 我可以在每个单独的子 div 上应用 b 类中已经存在的不同背景图像属性(我将固定子 div 的数量)，谢谢 Link to refer my usecase

<mat-horizontal-stepper _ngcontent-c1="" class="mat-stepper-horizontal 
ng-tns-c4-0" role="tablist">

<div class="mat-horizontal-stepper-header-container">

<div class="mat-horizontal-stepper-header-container">
<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true" 
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0" 
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>1</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>

<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true" 
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0" 
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>2</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>

<mat-step-header class="mat-horizontal-stepper-header mat-step-header ng-tns-c4-0"
role="tab" ng-reflect-icon="number" ng-reflect-index="0" ng-reflect-selected="true" 
ng-reflect-active="true" ng-reflect-optional="false" tabindex="0" 
id="mat-step-label-0-0" aria-controls="mat-step-content-0-0" aria-selected="true">
<div class="mat-step-header-ripple mat-ripple" mat-ripple="" ng-reflect-trigger="[object HTMLElement]"></div>
<div ng-reflect-ng-switch="number" class="mat-step-icon">
<span>2</span>
</div>
<div class="mat-step-label mat-step-label-active mat-step-label-selected"></div>
</mat-step-header>

</div>
</mat-horizontal-stepper>

这是 Angular material2 中的一个 Stepper 模块，我的目标是为每个设置不同的单独背景图像三个 mat-step-icon(12,23,34)行号。每个使用 css3 属性的类(mat-step-icon 类它具有我需要覆盖的背景图像属性)

我试过的我在 mat-step-icon 类中给出了背景图像，但它将应用于所有 mat-step-icon 类，有没有办法让每个 mat-step-icon 的不同背景图像属性可以是应用

Answer 1

要定位具有相同类的元素，在这种情况下可以使用 nth-child() 选择器。

nth-child() 是一个sibling 选择器，所以在你的伪代码中它看起来像这样

.b:nth-child(1) {
  background-image: url( path1);
}
.b:nth-child(2) {
  background-image: url( path2);
}

但在您的生产代码中，我们需要使用 nth-child 选择器定位的不是 .mat-step-icon 类/元素本身，它是它的父级，像这样

.mat-step-header:nth-child(1) .mat-step-icon {
  background-image: url( path1);
}
.mat-step-header:nth-child(2) .mat-step-icon {
  background-image: url( path2);
}