用于多个元素的CSS-Selector

Question

我根本没有得到如何使用更高级的css选择器,如+或>但是因为我现在需要它来防止太多的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>