多元素CSS选择器

我根本不知道如何使用更高级的css选择器，如+或> 但我现在需要它来防止太多JS，也许有人可以帮我解决这个区块的特殊情况：

<section class="rf_re1-suche_container">
    <input type="search" placeholder="Your search">
    <button>Send</button>
</section>

---

还有按钮。所以：如果输入有焦点，我希望输入和按钮有相同的背景。我该怎么做？谢谢

只需为按钮添加选择器，以逗号分隔：

.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus ~ button {
    background: orange;
}

波浪线（

~

）是通用的。仅当元素前面有同级元素之前的元素时，它才会选择该元素

---

顺便说一句，这非常类似于，但对于后者，这两个元素需要彼此紧随其后。在您的情况下，这并不重要，因为这两个元素是父元素中唯一的元素。

您需要分别针对输入和按钮。由于您希望仅当输入具有焦点时才应用此选项，因此需要重复整个选择器，包括

输入：焦点

部分，然后使用

+

组合器将按钮链接到焦点输入：

.rf\u re1-suche\u容器输入：焦点，
.rf_re1-suche_容器输入：焦点+按钮{
背景：橙色；
}

发送

操作员只想在输入具有焦点时设置按钮样式。这个按钮的选择与输入无关。@BoltClock是的，我读得太快了，我修改并扩展了answer@BoltClock同样地；）

.rf_re1-suche_container input:focus,
.rf_re1-suche_container input:focus ~ button {
    background: orange;
}