是否可以将div的相邻邻居作为目标

Question

我想知道是否可以使用中间元素来定位两个相邻元素？

例如：

{{1}}

当输入具有错误类时，我想将标签和 span 定位为红色。

我设法使用以下内容将标签设为红色：

{{1}}

然而，我对这个范围没有运气。有人可以告诉我这是否可能？如果是这样，请帮忙。

Answer 1

您可以将flexbox与order属性一起使用，以可视方式重新排序元素，同时将input作为DOM中的第一个元素，以便您可以使用常规兄弟选择器。

＆＃13;

＆＃13;

div {
  display: flex;
}
.icon {
  order: -1;
}
input.error ~ * {
    color: red;
}

＆＃13;

<div>
  <input id="input" class="input error" type="text">
  <span class="icon">icon</span>
  <label for="input">label</label>
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我使用jquery .siblings()来定位范围并为其添加一个类。

Answer 3

  

我想知道是否可以针对两个邻居   使用中间元素的元素？

您可以使用 ax 选择器%来定位两个相邻元素。

由于.icon和label之间没有共享的类或元素类型，因此您需要声明：

input.error % .icon,
input.error % label {
color: red;
}

或者，（在这种情况下）你可以组合CSS立即后续兄弟选择器+和 ax 立即前一个兄弟选择器?：

input.error ? .icon,
input.error + label {
color: red;
}