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）Line nos。每个使用css3属性的类（mat-step-icon类它有backgound-image属性，我需要覆盖）

我尝试过的我已经在mat-step-icon类中给出了backgound-image，但它将应用于所有mat-step-icon类，是否有一种方法可以使每个mat-step-icon不同的background-image属性可以应用

Answer 1

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

nth-child()是兄弟选择器，因此在您的伪代码中它将如下所示

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

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

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

使用css可以应用已存在的不同背景图像属性（不使用jquery）

1 个答案: