Question

如果他们的labels color: red;具有否 sibling，我想让所有input都拥有value。

我尝试首先选择inputs 而没有这样的value：

.state-input--red > .input__wrapper > .input__input:not([value])

然后，我尝试选择他的sibling label添加以下部分：

~ .input__label

因此我得到了此选择，并将color设置为red，但是它不起作用：

.state-input--red > .input__wrapper > .input__input:not([value]) ~ .input__label {
  color: red;
}

我还尝试通过在sibling之前也添加.input__wrapper >来指定label选择，但这是行不通的。这是我的代码段：

.state-input--red > .input__wrapper > .input__input:not([value]) ~ .input__label {
  color: red;
}

<div class="input state-input--red">
  <div class="input__wrapper">
    <label class="input__label" for="input00">I should be black, because my siblin input has a value</label>
    <input id="input00" type="text" value="Hello World">
  </div>
</div>

<hr>

<div class="input state-input--red">
  <div class="input__wrapper">
    <label class="input__label" for="input01">I should be red, because my sibling input has no value</label>
    <input id="input01" class="input__input" type="text">
  </div>
</div>

Answer 1

像a ~ b这样的选择器会匹配所有同级b之前的所有同级a元素，但是在您的标记中，是{{1}之前的label }}：这就是为什么它不起作用的原因。

作为一种可能的解决方案，您可以将input元素转换为带有.input__wrapper的{{1}}容器，然后在flexbox和flex-direction: row-reverse中切换顺序代码以保持当前的可视化效果。

这样做label这样的选择器将按预期工作。

CSS：如果同级输入没有值，请选择标签并更改颜色

1 个答案: