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

<分区>

我想在两个其他元素(兄弟)之间的元素上应用样式 - 见下文 - 在标签和输入之间的 img 上。
我可以将 + 运算符用于 sibling 的选择器，但我希望将样式应用于三个元素中的第二个元素。

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/