Css 如何覆盖ngModel输入样式

在我的Ionic应用程序中，我使用

[（ngModel）]

绑定并传递类中的输入值

<ion-item>
        <ion-label color="primary" floating>flow [m <sup>3</sup> /h]</ion-label>
        <ion-input type="number" [(ngModel)]="flow" (change)="calculate()"></ion-input>
</ion-item>

但这没用。我检查了控制台，发现层次结构树中的默认样式比我的高。见下文：

.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
    border-bottom-color: #32db64;
    box-shadow: inset 0 -1px 0 0 #32db64;
}
page-fan-choice .ng-valid * {
    border-bottom-color: #dedede;
    box-shadow: none;

我也试着使用

！重要信息

。我提供了帮助，但它也覆盖了我想要保留的输入的默认ionic样式，例如单击时的蓝色底部边框。因此，底部边框一直是灰色的

---

---

如何在不修改默认Ionic样式的情况下覆盖此ngModel样式？

如果这是您很难覆盖的CSS规则：

.item-md.item-input.ng有效。输入具有值：not（.input具有焦点）。项内部{}

假设你要设计的div有另一个类“foo”，将其区分开来。只需更改该规则即可在组件中添加额外的类。现在更具体了

.foo.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {}

---

如果这是您很难覆盖的CSS规则：

.item-md.item-input.ng有效。输入具有值：not（.input具有焦点）。项内部{}

假设你要设计的div有另一个类“foo”，将其区分开来。只需更改该规则即可在组件中添加额外的类。现在更具体了

.foo.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {}

---

您需要使您的样式的特定性高于您想要覆盖的样式

div#test span { color: green }
div span { color: blue }
span { color: red }

---

您需要使您的风格的特殊性高于您想要替代的风格

div#test span { color: green }
div span { color: blue }
span { color: red }

---

你能为它创建一个Plunk吗？检查此链接你能为它创建Plunk吗？检查此链接