用于多个元素的CSS-Selector

Question

我根本没有得到如何使用更高级的css选择器，如+或＆gt; 但是因为我现在需要它来防止太多JS，也许有人可以帮助我解决这个块的特殊情况：

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

我想这样做：

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

也适用于按钮。所以：如果输入有焦点，我希望输入和按钮具有相同的背景。我该怎么办？谢谢！

Answer 1

您需要单独定位输入和按钮。因为您希望仅在输入具有焦点时应用此选项，您需要重复整个选择器，包括input:focus部分，然后使用+组合器将按钮链接到焦点输入：

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

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

Answer 2

只需添加按钮的选择器，用逗号分隔：

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

代字号（~）是一般sibling selector。它仅在元素之前的元素前面选择元素。

这与adjacent sibling selector非常相似，但后者需要两个元素紧挨着对方。在你的情况下，它并不重要，因为这两个元素是父母中唯一的元素。