簡體   English   中英

CSS 編輯在谷歌瀏覽器控制台中工作,但在樣式表中不工作

[英]CSS editing working in google chrome console, but not working in stylesheet

我正在嘗試在 Ionic 4 中編輯表單。我可以在 chrome 中定位 HTML 元素,但是當我嘗試在應用程序中的 CSS 中使用這些編輯時,它不起作用。

當我使用 chrome 向 Element 添加樣式時,它的工作方式如下所示。

在此處輸入圖像描述

在此處輸入圖像描述

我試圖在樣式表中添加這些屬性,例如

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>

刪除 div 元素的點並停止正在運行的代碼並重新啟動它將工作......!!

錯誤 CSS

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

右 CSS

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM