在 CSS 选择器的内部元素上应用样式 [重复]答案

【问题标题】：Apply style on inner element of CSS selector [duplicate]在 CSS 选择器的内部元素上应用样式 [重复]
【发布时间】：2019-08-16 13:34:19
【问题描述】：

我想将样式应用于两个其他元素（兄弟）之间的元素 - 见下文 - 在标签和输入之间的 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
}

【问题讨论】：

【解决方案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
    }
}

【讨论】：

不 - 不是这种情况 - 我想根据第三个元素的类应用样式：，意思是 -在这种情况下，仅当输入类型具有“ng-invald”类
我想这就是你要找的：developer.mozilla.org/en-US/docs/Web/CSS/:has 但是，它还没有得到真正广泛的支持，你可以尝试一下，但我认为你的问题只能通过 js/jquery 来解决

【解决方案2】：

首先，你为什么不直接使用类来应用样式。

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

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

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

【讨论】：

关于您的第一条评论：validation-mark 元素的样式取决于第三个元素的类，意思是：如果第三个元素具有“有效”类，则对其进行样式设置，而不是具有样式“无效的”。关于第二条评论 - 我使用 angular，不要使用 jquery，也不想把它放在代码中 - 它应该应用于所有应用程序。

【解决方案3】：

简单地说，它将在image 和input 上应用display: inline !important;。谢谢

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

【讨论】：