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

我想让所有的

标签

都有

颜色：红色如果其
同级
输入
具有否
值

我尝试先选择
输入
而不选择
值
，如下所示：

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

然后我试着选择他的
兄弟
标签
添加此部分：

~ .input__label

所以我选择了这个选项，并将
颜色设置为
红色，但它不起作用：

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

我还试图通过在
标签
之前添加
.input\uu wrapper>
来指定
同级
选择，但它不起作用。以下是我的片段：


.state input--red>.input\uu wrapper>.input\uu输入：非（[value]）~.input\u标签{
颜色：红色；
}

我应该是黑色的，因为我的同胞输入有一个值

我应该是红色的，因为我的兄弟输入没有值
像
A~b
这样的选择器匹配所有同级
b
元素，前面是
A
元素，但在标记中，
输入之前是
标签
：这就是它不起作用的原因

作为一种可能的解决方案，您可以将
.input\u wrapper
元素转换为
flexbox
容器，并使用
flexdirection:row reverse
，然后在代码中切换
label
和
input
的顺序，以保持当前的可视化效果

这样做类似于
。input\uu input:not（[value]）~。input\uu label
将按预期工作。
所以基本上，如果标记中元素的顺序颠倒，我的css选择器将工作？@MrBuggy确切地说：一般同级组合符（~）和相邻同级组合符（+）仅适用于以下同级。或者，您可以使用
order
属性显式重新排列元素的视觉显示顺序，或者使用CSS网格，使用命名的
Grid area
s。很好，它适用于flexbox解决方案，太棒了！我认为（+）选择器关注元素的顺序，而（~）关注相邻的同级元素，但不关注mather wich方向。谢谢你！