多个元素的 CSS 选择器

2022-01-10 00:00:00 css-selectors css

我完全不知道如何使用更高级的 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!

推荐答案

您需要分别定位输入和按钮.因为您希望这仅在输入具有焦点时应用，所以您需要重复整个选择器，包括 input: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>

相关文章