多个元素的 CSS 选择器

Question

我完全不知道如何使用更高级的 css 选择器，例如 + 或 >但是因为我现在需要它来防止过多的 JS，也许有人可以帮助我解决这个 block 的这种特殊情况:

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