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

Question

我想在其他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
}

Answer 1

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

如果是，则可以使用相邻兄弟组合器选择器：

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

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

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
    }
}

Answer 2

第一件事，为什么不直接使用类来应用样式。

.validation-mark{
display: inline !important; 
}

如果必须找到第二个元素，也可以使用JQuery。

$(label.field-name).next('img.validation-mark').css({'display': 'inline !important'});

Answer 3

简单起见，它将在display: inline !important;和image上同时应用input。谢谢

label + img.validation-mark,
label + img.validation-mark + input[type="text"].ng-invalid {
  display: inline !important;
}

如果您只想在 img 上应用display: inline !important;。

.validation-mark {
  display: inline !important;
}

如果您只想在输入上应用display: inline !important;。

.ng-invalid {
  display: inline !important;
}

如果您想在所有元素上应用display: inline !important;。

label,
img,
label {
  display: inline !important;
}