多个元素的CSS选择器 [英] CSS-Selector for multiple elements

问题描述

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

I am not at all getting how to use more advanced css-selectors like + or > But as I am now needing it to prevent too much JS, maybe someone can help me out with this particular situation of this 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;
}

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

but also for the button. So: If the input has a focus I want the input AND the button to have the same background. How would I do that? Thanks!

推荐答案

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

You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:

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

这篇关于多个元素的CSS选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！