html - 在CSS选择器的内部元素上应用样式

This question already has answers here:

Is there a “previous sibling” selector?
                                
                                    （16个答案）
                                
                        
                                在10个月前关闭。
            
                    
我想在其他2个元素（兄弟姐妹）之间的元素上应用样式-参见下文-在标签和输入之间的img上。
我可以对兄弟姐妹的选择器使用+运算符，但是我希望将样式应用于三个元素中的第二个元素。

HTML：

<label class="field-name">XXXX</label>
<img class="validation-mark">
<input type="text" class="ng-invalid">

CSS：

label + img.validation-mark + input[type="text"].ng-invalid
{
  display: inline !important; //I need this style to be applied on the img
}

最佳答案

您要选择标签右边的图片吗？

如果是，则可以使用相邻的同级组合器选择器：

相邻的同级组合器选择器允许您选择紧接在另一个特定元素之后的元素。

这些选择器可以帮助您以上下文方式应用样式。

label + img.validation-mark
{
  display: inline !important; //I need this style to be applied on the img
}

如果不是这种情况或特定要求，我建议您只选择图像本身并对其应用样式：

img.validation-mark
{
  display: inline !important; //I need this style to be applied on the img
}

另外，如果您使用的是sass，就像您标记的一样，则可以这样做：

img
{
    &.validation-mark {
         display: inline !important; //I need this style to be applied on the img
    }
}

关于html - 在CSS选择器的内部元素上应用样式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55352559/