如何定位特定的 html 元素以在 CSS 中进行编辑答案

【问题标题】：How do I target specific html elements to edit in CSS如何定位特定的 html 元素以在 CSS 中进行编辑
【发布时间】：2020-03-03 11:51:47
【问题描述】：

我在 Ionic 4 中有一个验证表单，我正在尝试使用 CSS 进行编辑。当我使用 CSS 编辑表单时，它似乎只针对表单的元素，在单击表单组之后。

下面我附上了点击前和点击后的表单。在单击之前，我似乎无法定位表单元素状态。

点击前

点击后

Form.html

<ion-content  padding class="form-content">
    <form class="form" \[formGroup\]="validations_form" (ngSubmit)="tryLogin(validations_form.value)">

      <ion-item class="item item-trns text-center">
        <ion-label position="floating" >Email</ion-label>
        <ion-input 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" >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">Log In</ion-button>
      <label class="error-message">{{errorMessage}}</label>
    </form>

Form.css

form {
   margin-top: 99%;
}

.item.item-trns {
    border-color: rgba(0, 0, 0, 0);
    background-color: rgba(0, 0, 0, 0);
    color: orange;
}

【问题讨论】：

这看起来可能是浏览器本身在做一些表单样式。当它认为它可以为你自动完成它时，它会注入自己的样式。尝试使用隐身浏览器访问它，看看您是否仍然获得这些样式。
另外，如果有疑问，在样式规则的末尾加上!important; 会有所帮助:)

标签： html css angular ionic4

【解决方案1】：

您是否尝试过在添加更多特异性之前包含该元素？

ion-item .item-trns {
color: orange;
}

乍一看，我不明白为什么这不起作用，可能代码中其他地方还有另一个规则可能导致问题 -

您也许可以通过向元素添加 id 来解决这个问题？

祝你好运

【讨论】：

【解决方案2】：

您可以关注他们的文档 - https://ionicframework.com/docs/api/item#css-custom-properties

ion-item {
  --color: orange;
}

【讨论】：