ion-select изображение и область действия SCSS

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 / загрузки / по умолчанию / оригинал / 3X / 8 / ж / 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.

Вы можете мне помочь?