表单有效时更改背景图像

Question

我正在使用HTML，CSS和Angular JS为网页创建表单。我已经设法实现了我想要的东西，但我不认为它以非常好的方式完成，只是想知道是否会有另一种方法来实现相同的结果？ （也许没有，但我想不管怎么说）。

基本上我使用AngularJS表单来验证我的表单。如果表单有效，则将ng-valid类应用于for）。在我的表单中，如果表单无效，我会显示红色X的背景图像，如果表单有效，则显示绿色勾选。当表单有效时添加ng-valid类，我有以下CSS来更改图像：

.ng-valid>div>div>div>div>a>div>div.regImg1{
     background-image: url('../img/green-tick.png');
 }

我的标准CSS是：

.regImg1{
    background-image: url('../img/grey-tick.png');
}

虽然这有效，但我知道对HTML进行更改会破坏它。我想知道是否有一种更为优雅的方法可以做到这一点，当HTML发生变化时，这种方法不会中断。

Answer 1

您可以使用descendant选择器，它只是分隔两个选择器的空间。

.ng-valid .regImg1 {
...
}

Answer 2

是的，这是对html更改的关注，因为选择器对子选择器非常具体。

像这样的简单选择器可以完成这项工作，而不是特定于标记结构

.ng-valid .regImg1{
    background-image: url('../img/green-tick.png');
}

Answer 3

您可以考虑在父元素和子元素之间使用空格，这将告诉 您希望任何子 匹配父 中的子描述无论它有多深 。

这将为您提供以下内容：

.ng-valid .regImg1{
    background-image: url('../img/green-tick.png');
}