Javascript 当另一个div处于焦点时，如何更改css中div的颜色

我希望

input1

在

中的
处于焦点时将颜色更改为蓝色。为什么这不起作用

<div id="input1">input1:</div>
<input id="in">

我还创建了一个
您可以通过如下更改html标记来实现这一点

您的选择器
#in:focus+#input1{
将不起作用，因为
+
将选择下一个同级

#in:focus+#input1
将选择
#input1
元素，该元素是下一个到
#in
元素的

你可以阅读更多关于



正文{
颜色：红色；
}
#输入：焦点+#输入1{
颜色：蓝色；
}

input1:
您只能使用CSS更改颜色，但它不适用于输入元素

可能您必须使用jQuery

 .ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon:hover::after {   content: "Look at this orange box.";   background-color: red;   border-color: black;   border-style: dotted; }

哦，好的，谢谢，但是如果我想在之前选择一个，而不改变顺序，我该怎么做？@PaulBernhardWagner CSS中没有以前的兄弟选择器，如果你想，你也可以使用它Javascript@PaulBernhardWagner是的，您必须使用纯JS或任何JS库（如jQuery）进行DOM元素操作你想要使用JS的解决方案吗
 .ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon::after {   content: "Look at this orange box.";   background-color: #FFBA10;   border-color: black;   border-style: dotted; }

.ribbon:hover::after {   content: "Look at this orange box.";   background-color: red;   border-color: black;   border-style: dotted; }