无法在输入焦点上取消同级属性

Question

我想在输入集中时更改同级元素的属性，但不起作用。我在做什么错了？

.sibling {
  width: 100px;
  height: 100px;
  background-color: blue;
}

input:focus ~ .sibling {
  background-color: red;
}

<div class="sibling"></div>
<input type="text">

谢谢！

Answer 1

只需更改您的html顺序

<input type="text">
<div class="sibling"></div>