无法在输入焦点上更改同级属性[重复]

Question

这个问题在这里已有答案：

• Is there a “previous sibling” CSS selector? 13个答案
• What does the “~” (tilde/squiggle/twiddle) CSS selector mean? 5个答案

我想在输入聚焦时更改兄弟元素的属性，但它不起作用。我究竟做错了什么？

.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>