Question

我有一个页面（页面A），其中带有离子选择图像。

HTML代码页A

          <ion-label stacked>Cultivo</ion-label>
          <ion-select [(ngModel)]="todas" formControlName="producto" (ionChange)="onSelectChangeProd($event)">
            <ion-option *ngFor="let p of jsonproductos" value="{{p.id}}">
                {{p.nombre}}
            </ion-option>
          </ion-select>

SCSS代码页A

.alert-radio-icon{
    border-radius: 0 !important;
    border: none !important;
    height: 40px !important;
    width: 40px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat;
}

[id^="alert-input-"][id$="0"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/1.png") !important;
}
[id^="alert-input-"][id$="1"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/2.png") !important;
}
[id^="alert-input-"][id$="2"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/3.png") !important;
}    
[id^="alert-input-"][id$="3"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/4.png") !important;
}
[id^="alert-input-"][id$="4"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/5.png") !important;
}
[id^="alert-input-"][id$="5"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/6.png") !important;
}    
[id^="alert-input-"][id$="6"] .alert-radio-icon{
    background-image: url("../../assets/imgs/cultivos/7.png") !important;
}    

.alert-radio-inner{
    background-color: transparent !important;
}

预览： https://discourse-cdn-sjc1.com/ionicframework/uploads/default/original/3X/8/f/8fdb9774a3fd745e8d2434bf8d6b7009925432e7.jpeg

因此，我需要在另一页（B页）中重复使用离子选择图像。

HTML代码页B

          <ion-label stacked>Tipo de Evento</ion-label>
          <ion-select [(ngModel)]="todas" formControlName="tipo" (ionChange)="onSelectChangeEvento($event)">
            <ion-option *ngFor="let e of jsoneventos" value="{{e.id}}">
                {{e.nombre}}
            </ion-option>
          </ion-select>

CSS代码页B

.alert-radio-icon{
    border-radius: 0 !important;
    border: none !important;
    height: 40px !important;
    width: 40px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat;
}

[id^="alert-input-"][id$="0"] .alert-radio-icon{
    background-image: url("../../assets/imgs/eventos/1.png") !important;
}
 [id^="alert-input-"][id$="1"] .alert-radio-icon{
    background-image: url("../../assets/imgs/eventos/2.png") !important;
}
[id^="alert-input-"][id$="2"] .alert-radio-icon{
    background-image: url("../../assets/imgs/eventos/3.png") !important;
}    
[id^="alert-input-"][id$="3"] .alert-radio-icon{
    background-image: url("../../assets/imgs/eventos/4.png") !important;
}
 [id^="alert-input-"][id$="4"] .alert-radio-icon{
    background-image: url("../../assets/imgs/eventos/5.png") !important;
}

.alert-radio-inner{
    background-color: transparent !important;
}

但是运行时，页面A图像列表显示在页面B上。（???）

如果将CSS放在B页范围内，则不会显示任何内容。

如果将CSS放在A范围页面内，则不会显示任何内容。

我需要了解CSS代码的范围。

你能帮我吗？

离子选择图像和SCSS范围

0 个答案: