Редактирование CSS работает в консоли Google Chrome, но не работает в таблице стилей

Question

Я пытаюсь редактировать форму в Ionic 4. Я могу настроить таргетинг на элементы HTML в Chrome, однако, когда я пытаюсь использовать эти изменения в CSS внутри приложения, это не работает.

Когда ядобавить стиль к элементу, используя хром, он работает как показано ниже.

Я пытался добавить эти свойства в таблицу стилей, такую ​​как эта

ion-item.div.item-native {
    background-color: blue !important;
}

div.item-native {
    background-color: blue !important;
}

.item-native {
    background-color: blue !important;
}

, но в результате получилось следующее, а я этого не хочу.

Почему CSS не работает?

это HTML-код формы

<form class="form" [formGroup]="validations_form" (ngSubmit)="tryRegister(validations_form.value)">
<ion-item id ="item-native">
      <ion-label id ="item-native" position="floating" color="primary">Email</ion-label>
      <ion-input id ="item-native" type="text" formControlName="email"></ion-input>
    </ion-item >
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.email">
        <div class="error-message" *ngIf="validations_form.get('email').hasError(validation.type) && (validations_form.get('email').dirty || validations_form.get('email').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-item>
      <ion-label position="floating" color="primary">Password</ion-label>
      <ion-input type="password" formControlName="password"></ion-input>
    </ion-item>
    <div class="validation-errors">
      <ng-container *ngFor="let validation of validation_messages.password">
        <div class="error-message" *ngIf="validations_form.get('password').hasError(validation.type) && (validations_form.get('password').dirty || validations_form.get('password').touched)">
          {{ validation.message }}
        </div>
      </ng-container>
    </div>
    <ion-button class="submit-btn" expand="block" type="submit" [disabled]="!validations_form.valid">Register</ion-button>
    <label class="error-message">{{errorMessage}}</label>
    <label class="success-message">{{successMessage}}</label>
  </form>

Answer 1

Удалить точку для элемента div и остановить ваш работающий код и перезапустить его будет работать ... !!

Неправильный CSS

ion-item.div.item-native {
    background-color: blue !important;
}

Правильный CSS

ion-item div.item-native {
    background-color: blue !important;
}