当表单有效时，背景图像会发生变化

Background img changing when form is valid

本文关键字：变化 图像 背景 表单 有效      更新时间：2023-09-26

我正在创建一个使用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改变时，它不会中断。

你可以使用后代选择器，它只是一个空格分隔两个选择器。

.ng-valid .regImg1 {
...
}

是的，这是一个与html变化有关的问题，因为选择器是如此特定于子选择器。

像这样一个简单的选择器就可以完成这项工作，而不需要特定于标记结构 
.ng-valid .regImg1{
    background-image: url('../img/green-tick.png');
}

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

这将给出以下内容:

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