如何使用AngularJS动态更改表单颜色？

Question

我有一个AngularJS应用，当用户在文本框中输入一些字符串时，我试图改变表格边框。

<input type="url" name="site" class="form-control" ng-model="site" required maxlength="255">

基本上我使用ngMessages来验证表单。

因此，当表单为VALID时，我将ng-valid作为输入字段的类。

当表单为INVALID时，我将ng-invalid作为输入字段的类。

现在我的想法是简单地为这些选择器分配一些CSS样式，它将改变边框的颜色。但它没有！

.form-control.ng-valid, .form-control.ng-valid:focus {
    border-color: green;
};

.form-control.ng-invalid.ng-dirty, .form-control.ng-invalid.ng-dirty:focus {
    border-color: red;
};

当我运行代码时，只显示绿色（当它有效时）和红色没有显示（虽然它应该是红色）。

所以它就像第二个CSS规则甚至没有被检查过。如果我更改订单，则RED显示，绿色不显示。

这可能是什么问题？我真的不明白为什么会发生这样的事情。